说明

对 某标签 嵌套的 子标签 进行选择

语法

选择器1 选择器2 选择器3{
    样式属性1:值1;
    样式属性2:值2;
}

每个选择器之间用空格进行分割，多个嵌套层次应该以多个空格进行分割

注意：后代选择器 应避免出现多层

应用场景

可以通过父标签选中 子标签、孙标签，可以不用给子标签、孙标签 设置 id选择器、类选择器

后代选择器 VS 子代选择器

写法类似，但含义不同：

• 后代选择器：可以跳过子标签，选中孙标签
• 子代选择器：不能跳过子标签，选中孙标签，只能一层一层逐级选中

案例

在不改变下面HTML代码的情况下，让下面的 一、二、三 显示成红色：

<ul class="c1">
    <li>李雷第<span>一</span>名</li>
    <li>韩梅梅第<span>二</span>名</li>
    <li>lucy第<span>三</span>名</li>
</ul>

样式：

<style type="text/css">
    .c1 span{
        color:red;
    }
</style>

注意

div标签 和 li标签之间，间隔着 ul标签，后代选择器 可以跳过 儿子，直接匹配 孙子

原文出处：/show_1IX1FqBuQzaN.html