复合选择器
复合选择器有三种，分别是后代选择器、交集选择器和并集选择器。
比如上图中，
.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的后代。
所以，.boxp这个后代选择器，选择的是div中的两个p标签，而不会选择最后面的两个p标签。
2.后代不一定是儿子
比如下面的代码：
在上面的代码中，类名为box的div标签中，嵌套着ul标签和li标签，li标签里面又嵌套着p标签。这里的p标签相当于是这个div标签的曾孙子，并不是儿子。
但是，曾孙子也是后代。
所以，在上面代码的HTML结构中，.boxp这个后代选择器，仍然会选择类名为box的div中的两个p标签。
3.后代选择器可以有很多空格，来隔开好几代
比如下面的代码：
在上面的HTML代码结构中，div的后代是ul，ul的后代是li，li的后代是p，p的后代是em。
所以，要选择这个em标签，就按照这种嵌套顺序，具有后代关系的选择器用空格隔开就行。
当然，按照上面代码的HTML结构，你要用后代选择器，来选择em这个标签，中间的几个选择器省略点也是可以的，比如你可以写.boxem，这样写也是没问题的。中间你随便省略哪几个选择器都可以，只要顺序不要写错就行。
交集选择器
假如你要选择具有spec类的h3标签，怎么办呢？
这时就需要用交集选择器。
在这里，h3和.spec之间没有空格，否则就成了后代选择器了。
这里的h3.spec表示，它既是一个h3标签，同时它还具有spec类。
并集选择器
并集选择器是多个选择器之间用逗号隔开，表示同时选择多个标签。
并集选择器又叫分组选择器，逗号表示分组。
比如下面的代码：
上面的代码，表示同时把ul和ol标签的默认样式去掉(ul去掉列表项前面的小圆点，ol去掉列表项前面的数字)。
选择器之间可以任意的搭配、结合，从而形成复合选择器，我们必须能一目了然的看出选择器代表的含义。
比如下面的CSS代码：
在上面的CSS代码中，div.boxlip.specem这个选择器，我们不看HTML代码结构，也应该能够快速的知道它表示什么意思。
它表示，选择类名是box的div标签里面的li标签里面的类名为spec的p标签里面的em标签。
在下面的HTML结构中，用div.boxlip.specem这个复合选择器，就能选择到em标签：
选择器的写法是多种多样的，只要你真正理解了各种选择器，就能很快速的使用合适的选择器，来选择你想要选择的标签。
接下来我创建一个复合选择器.html的文件，在里面演示复合选择器代码。
代码如下：
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0title复合选择器/titlestyle/*后代选择器*/.boxp{color:red;}/*交集选择器,选择既是p标签，又具有spec类名的p标签*/p.spec{color:green;font-style:italic;}/*并集选择器,同时选择ul和ol标签，给它们去掉默认样式*/ul,ol{list-style:none;}/style/headbodydivclass=boxp我是一个段落/pp我是一个段落/pullip我是一个段落/p/lilip我是一个段落/p/li/ul/divp我是一个段落/pp我是一个段落/ppclass=spec我是一个段落/pulli无序列表的列表项/lili无序列表的列表项/lili无序列表的列表项/lili无序列表的列表项/li/ulolli有序列表的列表项/lili有序列表的列表项/lili有序列表的列表项/lili有序列表的列表项/li/ol/body/html
在浏览器中显示效果如下：
我们看到，我在代码中写了很多p标签，
但是只有类名为box的div标签里面的p标签，字体是红色的，这就是.boxp这个后代选择器的作用。
只有带有spec类名的p标签，字体颜色是绿色并且字体是倾斜的，这就是p.spec这个交集选择器的作用。
并集选择器ul,ol同时选择了无序列表和有序列表标签，让它们的默认样式被去掉了。
CSS中的选择器用法非常灵活，只要能实现你的目的，你可以使用各种写法。
比如上面的代码中，后代选择器，你也可以这样写：div.boxp，意思就是选择类名是box的div标签里面的p标签。
这里不再多说，只要理解三种复合选择器的含义，就能灵活的使用各种写法。