Web前端开发笔记13——复合选择器1后代选择器

1.后代选择器（包含选择器），可以选择父元素里面子元素。其写法就是把外层标签写在前面内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

<!--我想把ol中的li改为蓝色-->
<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<ol>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ol>

style写法：

ol li{
    color: #7cdedb;
}

效果：

语法格式为：元素1 元素2 {样式声明}

• 此语法就表示了元素1里面的所有元素2（后代元素）。
• 元素1与元素2中的空格不能少。
• 元素1是父亲，元素2是儿子，修改样式只修改儿子中的样式，而父亲不修改。

上面展示代码中，如果多了一段相同的ol。

<!--我想把ol中的li改为蓝色-->
<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<ol>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ol>
<ol>
    <li>修改这里</li>
    <li>修改这里</li>
    <li>修改这里</li>
    <li>修改这里</li>
</ol>

这里我想修改第二个ol中的li，我们可以给ol添加一个class。

<ol class=“ol1”>
    <li>修改这里</li>
    <li>修改这里</li>
    <li>修改这里</li>
    <li>修改这里</li>
</ol>

这样css代码就可以改变为：

.ol1 li{
    color: bisque;
}

效果：