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

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

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

输出如下：