子代选择器
选中父元素中指定子元素
语法
父类 > 子类
选择器1 > 选择器2 .... {属性:属性值;属性:属性值.....;}
栗子
<style>
/* 子代选择器,父类标签只会选择子代标签 */
div > div {
font-size: 40px;
color: red;
}
/*
div.box > span {
color: blue
}
*/
</style>
<!--这里选中了 -->
<div class="div1">
<div class="div2">
<!-- 只要是div下的div下的所有元素都会被css化 -->
<p>我是p标签,div1的后代,是div2的子代,也是后代</p>
</div>
<div>789</div>
</div>
<!-- 这里并没有选中 -->
<div class="div3">
<p>我是p标签,我是div3的子代,也是后代</p>
</div>
注意
- 子代只包括儿子
- 子代选择器中,选择器与选择器之间通过
>
隔开
子代和后代的区别
- 选择对象不同
- 格式不同