锐客网

  1. 首页 > 睿知 > it技术 > >

如果子元素有CSS，如何将样式应用于父项（）

IT知识子元素

如果父类具有样式, 我们知道如何将样式应用于子元素。但是, 如果我们想将样式应用于父类以及CSS。这就是我们可以做到的方式。子组合器描述两个元素之间的父子。子组合器由"大于(> )"字符并分隔两个元素。
例子：

  • E> F, E元素的F元素子元素。
  • 以下选择器表示作为" body"子元素的" p"元素：body> p。
  • 因此, 父类中的样式可以是只写一次这样的名称
    .parent li {background:blue; color:black; }

  • 如果我们要在子类中应用样式, 请使用此样式
    .parent > li > ul > li {background:orange}

程序：
< !DOCTYPE html> < html> < head> < style> .parent li { background:blue; color:black; } .parent> li> ul> li { background:orange } .parent> li> ul> li> ul> li { background:pink; } < /style> < /head> < body> < ul class = "parent"> < li> I am first< /li> < li> I am second< /li> < li> I am third< /li> < li> I am forth< /li> < li> I am fifth < ul class = "child"> < li> child1< /li> < li> child2 < ul> < li> child2.1< /li> < li> child2.2< /li> < li> child2.3< /li> < /ul> < /li> < li> child3< /li> < li> child4< /li> < li> child5< /li> < /ul> < /li> < li> I am sixth< /li> < li> I am seventh< /li> < li> I am eigth< /li> < /ul> < /body> < /html>

【如果子元素有CSS，如何将样式应用于父项（）】输出如下：
如果子元素有CSS，如何将样式应用于父项（）

文章图片
CSS3没有父选择器。如果发布了CSS4, 则建议使用CSS4选择器, $, 就像选择li元素一样。
  • 但是, 到目前为止, 此代码无法在任何浏览器中使用。
    ul $li ul.sub { ... }

  • 同时, 如果需要选择父元素, 则必须使用JavaScript。
    $('ul li:has(ul.child)').addClass('has_child');

    推荐阅读


    上一篇：ML中的DBSCAN集群|基于密度的聚类

    下一篇：算法设计（给定比赛次数，查找比赛中的球队数）