CSS高级选择器
子代选择器
子代选择器用 > 表示,只选择指定元素的子元素(儿子标签)。
div 标签的儿子(一级子标签) p 标签;和 div 标签的后代(当前元素下的所有子标签) p 标签截然不同。
<div>
<p>我是div的儿子</p>
</div>
<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>
后代选择器
空格就表示后代。
这里强调一下:这两个标签不一定是连续紧挨着的,只要保持一个后代的关联即可。也就是说,选择的是后代,不一定是儿子。
.box1 p span{
background-color: rgb(170, 59, 142);
}
<div class="box1">
<p>我是段落我是段落我是段落<span>我是span