今天在看css基础的时候，发现了一个很有趣的事情，那就是 后代选择器 与 子元素选择器。
说来也惭愧，我以前一直以为，这俩是同一个东西，只是叫法不同而已，后来才发现，原来这俩是两个不同的东西。
后代选择器(descendant selector) 又称为包含选择器，可以选择作为某元素后代的元素。
子元素选择器(Child selectors) 选择作为某元素子元素的元素
看到这里，是不是觉得这俩作用差不多？嘿嘿~~~
重点就在于这俩的区别，我们直接以代码来展示看效果：
.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;
}
第一行
第二行
第三行
第四行
第一行
第二行
第三行
第四行
运行之后的效果
image
现在基本上可以看出区别来了吧，第一个红框框里的是 后代选择器 的效果，第二个红框框里的是 子代选择器 的效果。
后代选择器 会在指定元素的所有指定后代起作用，不管这个后代被嵌套了多少层，都会起作用，这个也是我们用的比较多的。
而 子元素选择器 则仅仅针对第一层起作用，也就是子代，如果被嵌套了，就不会起作用了。
