html中交集选择器,【css】选择器介绍（二）后代选择器，子代选择器，交集选择器，并集（群组）选择器...

本次总结的四种基础选择器，是使用之前的标签选择器，id选择器，类选择器所组合出来的。

选择器介绍(一)标签选择器、id选择器、类选择器

https://www.jianshu.com/p/d2f54bc64302

一、后代选择器 (element1 element2)

示例：div p{}

含义：选中div中的所有p元素

两个选择器间使用空格分离。如下图，div中凡是为p的后代会全部被选中，无论是子辈还是孙子辈，红线部分即为被选中的段落。

后代选择器范围.png

二、子代选择器(element1>element2)

示例：div>p{}

含义：选择div中的所有子代p元素

两个选择器之间使用大于号分离。在上图中，如果我们并不想选中div中的所有p，而是只想选中儿子一辈，不想选到li里的，就需要用到子代选择器啦。

子代选择器范围.png

三、交集选择器(element1element2)

示例：div.box1

含义：选择div中所有class值为"box1"的元素

div.box1{

background: pink;

}

1

1

1

1

群组选择器.png

可以看到所有类名为box1的div都被添加了样式，但是类名不为box1的div并没有被添加样式，类名为box1，但是不是div的元素也没有被添加样式。

形如div.box1, div#box1,div.box1#box2 这样连着写的的都是交集选择器，含义即为取交集部分。

四、并集(群组)选择器(element1,element2)

示例：box1,box2

**含义：选择class名为box1或box2的元素。

.box2,#box2{

background: pink;

}

1

1

1

1

image.png

和上一部分同样的结构，可以看到id名为box2和类名为box2的元素都被选中了，在实际应用中，如果两个标签拥有同样的效果，就可以使用并集选择器。比如：

h1,h2,p{

color:pink;

font-size:16px;

}