子选择器
使用
>
用来选择指定元素的直接后代元素,即:只选择第一层元素,不包含嵌套的同类元素
语法:元素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>
效果:
总结
- 子类选择器(
>
)作用于指定元素的直接后代 - 后代选择器(
空格
)作用于指定元素的所有后代