html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别

今天在看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

现在基本上可以看出区别来了吧，第一个红框框里的是 后代选择器 的效果，第二个红框框里的是 子代选择器 的效果。

后代选择器 会在指定元素的所有指定后代起作用，不管这个后代被嵌套了多少层，都会起作用，这个也是我们用的比较多的。

而 子元素选择器 则仅仅针对第一层起作用，也就是子代，如果被嵌套了，就不会起作用了。