两个list取交集_35 复合选择器(后代选择器、交集选择器、并集选择器)

成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。

复合选择器

复合选择器有三种，分别是后代选择器、交集选择器和并集选择器。

比如上图中，

.box .spec就是一个后代选择器。它的写法就是，在box类的后面跟一个空格，然后写spec类。既然叫后代选择器，也就是说，spec这个类名所在的标签(儿子)，是box这个类名所在的标签(父亲)的子标签。

li.spec是一个交集选择器。在这里，li是一个标签选择器，后面紧跟的.spec是一个class选择器，所以li.spec就表示，选择的标签既是一个li标签，同时这个li标签上还有spec类，即这个li标签上有class="spec"属性。

ul,ol是一个并集选择器。ul的后面是一个逗号，然后紧跟ol，所以并集选择器的写法，是在多个选择器之间用逗号隔开。

后代选择器

1.在CSS选择器中，使用空格表示"后代"。

比如下面的代码：

在上面的代码中，类名为box的div标签里面，有两个p标签，这两个p标签是这个div标签的子标签，也就是这个div标签的后代。

所以，在CSS代码中，.box这个class选择器，后面跟一个空格，再跟p这个标签选择器，就表示这里的p标签是.box这个类名所在的div标签的后代。

所以，.box p这个后代选择器，选择的是div中的两个p标签，而不会选择最后面的两个p标签。

2.后代不一定是"儿子"

比如下面的代码：

在上面的代码中，类名为box的div标签中，嵌套着ul标签和li标签，li标签里面又嵌套着p标签。这里的p标签相当于是这个div标签的"曾孙子"，并不是"儿子"。

但是，"曾孙子"也是后代。

所以，在上面代码的HTML结构中，.box p这个后代选择器，仍然会选择类名为box的div中的两个p标签。

3.后代选择器可以有很多空格，来隔开好几代

比如下面的代码：

在上面的HTML代码结构中，div的后代是ul，ul的后代是li，li的后代是p，p的后代是em。

所以，要选择这个em标签，就按照这种嵌套顺序，具有后代关系的选择器用空格隔开就行。

当然，按照上面代码的HTML结构，你要用后代选择器，来选择em这个标签，中间的几个选择器省略点也是可以的，比如你可以写.box em，这样写也是没问题的。中间你随便省略哪几个选择器都可以，只要顺序不要写错就行。

交集选择器

假如你要选择具有spec类的h3标签，怎么办呢？

这时就需要用交集选择器。

在这里，h3和.spec之间没有空格，否则就成了后代选择器了。

这里的h3.spec表示，它既是一个h3标签，同时它还具有spec类。

并集选择器

并集选择器是多个选择器之间用逗号隔开，表示同时选择多个标签。

并集选择器又叫分组选择器，逗号表示分组。

比如下面的代码：

上面的代码，表示同时把ul和ol标签的默认样式去掉(ul去掉列表项前面的小圆点，ol去掉列表项前面的数字)。

选择器之间可以任意的搭配、结合，从而形成复合选择器，我们必须能一目了然的看出选择器代表的含义。

比如下面的CSS代码：

在上面的CSS代码中，div.box li p.spec em这个选择器，我们不看HTML代码结构，也应该能够快速的知道它表示什么意思。

它表示，选择类名是box的div标签里面的li标签里面的类名为spec的p标签里面的em标签。

在下面的HTML结构中，用div.box li p.spec em这个复合选择器，就能选择到em标签：

选择器的写法是多种多样的，只要你真正理解了各种选择器，就能很快速的使用合适的选择器，来选择你想要选择的标签。

接下来我创建一个"复合选择器.html"的文件，在里面演示复合选择器代码。

代码如下：

    复合选择器

我是一个段落

我是一个段落

我是一个段落

我是一个段落

我是一个段落

我是一个段落

我是一个段落

无序列表的列表项 无序列表的列表项 无序列表的列表项 无序列表的列表项 有序列表的列表项 有序列表的列表项 有序列表的列表项 有序列表的列表项

在浏览器中显示效果如下：

我们看到，我在代码中写了很多p标签，

但是只有类名为box的div标签里面的p标签，字体是红色的，这就是.box p这个后代选择器的作用。

只有带有spec类名的p标签，字体颜色是绿色并且字体是倾斜的，这就是p.spec这个交集选择器的作用。

并集选择器ul,ol同时选择了无序列表和有序列表标签，让它们的默认样式被去掉了。

CSS中的选择器用法非常灵活，只要能实现你的目的，你可以使用各种写法。

比如上面的代码中，后代选择器，你也可以这样写：div.box p，意思就是选择类名是box的div标签里面的p标签。

这里不再多说，只要理解三种复合选择器的含义，就能灵活的使用各种写法。

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！