微细节之子选择器与后代选择器的区别

子选择器

使用 > 用来选择指定元素的直接后代元素，即：只选择第一层元素，不包含嵌套的同类元素

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

示例：

<style>
    span {
        background-color: white;
    }
    div > span {
        background-color: rgb(8, 245, 28);
    }
</style>

<div>
    <span>
        第一层span<br/>
        <span>第二层span</span>
    </span>
</div>
<span>第三层span</span>

效果：

后代选择器

使用 空格用来选择指定元素的全部后代元素。

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

示例：

<style>
    span {
        background-color: white;
    }
    div span {
        background-color: rgb(8, 245, 28);
    }
</style>

<div>
    <span>
        第一层span<br/>
        <span>第二层span</span>
    </span>
</div>
<span>第三层span</span>

效果：

总结

• 子类选择器（>）作用于指定元素的直接后代
• 后代选择器（空格）作用于指定元素的所有后代