如果子元素有CSS,如何将样式应用于父项?

2021年4月13日09:56:30 发表评论 860 次浏览

如果父类具有样式, 我们知道如何将样式应用于子元素。但是, 如果我们想将样式应用于父类以及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,如何将样式应用于父项?1

CSS3没有父选择器。如果发布了CSS4, 则建议使用CSS4选择器, $, 就像选择li元素一样。

  • 但是, 到目前为止, 此代码无法在任何浏览器中使用。
    ul $li ul.sub { ... }
  • 同时, 如果需要选择父元素, 则必须使用JavaScript。
    $('ul li:has(ul.child)').addClass('has_child');

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: