今天在看css基础的时候，发现了一个很有趣的事情，那就是 后代选择器 与 子元素选择器。
说来也惭愧，我以前一直以为，这俩是同一个东西，只是叫法不同而已，后来才发现，原来这俩是两个不同的东西。
后代选择器（descendant selector） 又称为包含选择器，可以选择作为某元素后代的元素。
子元素选择器（Child selectors） 选择作为某元素子元素的元素
看到这里，是不是觉得这俩作用差不多？嘿嘿~~~
重点就在于这俩的区别，我们直接以代码来展示看效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.box_1, .box_2 {
border: solid 1px red;
margin: 10px;
float: left;
width: 100px;
text-align: center;
}
.box_1 p {
color: red;
}
.box_2 > p {
color: red;
}
</style>
</head>
<body>
<div class="box_1">
<p>第一行</p>
<p>第二行</p>
<div>
<p>第三行</p>
<p>第四行</p>
</div>
</div>
<div class="box_2">
<p>第一行</p>
<p>第二行</p>
<div>
<p>第三行</p>
<p>第四行</p>
</div>
</div>
</body>
</html>
运行之后的效果
image
现在基本上可以看出区别来了吧，第一个红框框里的是 后代选择器 的效果，第二个红框框里的是 子代选择器 的效果。
后代选择器 会在指定元素的所有指定后代起作用，不管这个后代被嵌套了多少层，都会起作用，这个也是我们用的比较多的。<br />
而 子元素选择器 则仅仅针对第一层起作用，也就是子代，如果被嵌套了，就不会起作用了。
网友评论