CSS后代选择器和子代选择器
1.后代选择器
祖先元素和后代元素(相对的概念)
后代元素:被包含在祖先元素中的元素。
祖先元素:包含后代元素的元素。
后代选择器语法
选择器1 选择器2 选择器3{}
选择器之间用空格隔开
举个例子:选中c元素的后代元素span
...
.c span{
color: skyblue;
}
...
<body>
<div class="c">
<span>c的子代</span>
<div>
<span>c的后代</span>
</div>
</div>
<span>c的兄弟</span>
</body>
2.子代选择器
父元素和子元素(相对的概念)
父元素:直接包含子元素的元素。
子元素:被父元素直接包含的元素。
子代选择器语法
选择器1 > 选择器2{}
举个例子:选中c元素的子代元素span
...
.c > span{
color: skyblue;
}
...
<body>
<div class="c">
<span>c的子代</span>
<div>
<span>c的后代</span>
</div>
</div>
<span>c的兄弟</span>
</body>