复合选择器就是两个或多个简单选择器，通过不同方式组合而成的选择器，主要包括交集选择器、并集选择器、关系选择器。其中，关系选择器又分为子女选择器、后代选择器、相邻后兄弟选择器、普通后兄弟选择器。

图片说明：左侧为代码，右侧为演示。

1.交集选择器(intersections of selectors) 也称为（标签指定选择器）

当我们看到“交集”这个词时，就会感觉这太简单了，这是中学数学的基本教学内容。对啊，交集选择器也就是这么简单。

交集选择器是由两个简单选择器直接连接构成，两个选择器之间没有分隔符号，其结果是选中两者各自作用范围的元素的交集。

注意：第一个必须是标记选择器;第二个必须是类选择器或id选择器;两个选择器之间不能有任何字符(包括空格)。

示例：

解释：

左侧代码中的交集选择器“p.kl”只会选中类别名称为“kl”的段落元素p，所以只是第一个段落中的文字颜色为红色;而交集选择器“div#pt”则只会选中id名称为“pt”的元素div，所以第一个div中的文字颜色为蓝色。

提示：

在CSS中并没有专门定义“交集选择器”这个词。在CSS中，将“p.kl”这种形式的选择器归为类别选择器(class selectors);而将“div#pt”这种形式的选择器归为ID选择器(ID selectors)。

2.并集选择器(groups of selectors)

“并集”与“交集”一样，也是中学数学就熟悉的内容，所以并集选择器也不难理解。

并集选择器是指用逗号“,”把选择器隔开的选择器列表，其结果为该列表中每个独立选择器所选中元素的并集。

注意：在列表中的选择器与顺序没有关系。在CSS中，当多个选择器具有相同的声明时，就可以将这几个选择器放在一个用逗号隔开的列表中。

提示：半角空格可以出现的逗号前面与(或)后面，但不是必须的。

例如，以下三条样式规则有同样的声明，可以精简为一条样式规则，且样式效果是相同的。这种等效的前提是：前面三条样式规则都是合法的，没有出现非法选择器。

p { color: red; }

div { color: red; }

h1{ color: red; }

可精简为：

p, div, h1 { color: red; }

示例1：

解释：

左侧代码中，并集选择器“p,div,h1”会选中相应的元素，所以它们的文字颜色为红色。前面已经提到，并集选择器列表中的选择器没有先后顺序。为了避免引起这种不必要的误解，所以在示例中以不同顺序添加了多个元素。

但是也有可能出现这样一种情况：上例中的前面三条样式规则中只要有一个选择器不合法，那么精简后的并集选择器将被全部放弃，即这条样式规则将完全失效。

示例2：

解释：

左侧代码中，并集选择器“p,div..rm,h1”中出现了一个不合法的选择器“div..rm”，这个并集选择器被全部放弃。因此，并集选择器中单个选择器选中的全部元素的文字颜色也没有变为红色。

3.关系选择器

(1).子女选择器(child combinators)

子女选择器是CSS2中引入的，相信大家从字面上就能理解这种选择器，它只表示父母与子女的关系。

子女选择器就是用来表示两个元素之间的父子关系，它用大于号“>”将两个简单选择器序列隔开。

形式“A>B”的选择器，代表选择器B所代表的元素是选择器A所代表元素的任意一个子女元素。

示例：

解释：

左侧代码中，子女选择器“p>em”选中了元素p的子女元素em，所以其文字颜色为红色;而前面的元素p中有一个孙元素em(注意：不是子女元素)，所以不会被选中。

(2).后代选择器(descendant combinators)

正如《国语·周语下》中所写的“……皆黄、炎之后也”，我们都是炎黄子孙，都是炎黄的后代。可是你要知道啊，这炎帝与黄帝可是八竿子都打不着的祖先啊。不过没有关系，这并不影响我们理解后代选择器这种类型。

后代选择器是CSS1中引入的，是用来描述在文档树中一个元素是另一个元素的后代这种祖先与后代关系的。所谓的后代选择器就是用空格将两个简单选择器序列分隔。

形式“A B”的选择器，代表元素B是某个祖先元素A的任意一个后代元素。

示例：

解释：

左侧代码中，子女选择器“p em”选中了元素p的后代元素em(说明：第一个元素p的后代元素em其实是孙元素;第二个元素p的后代元素其实是子女元素)，所以这两个元素emr的文字颜色均为红色。

(3).后兄弟选择器(sibling combinators)

后兄弟选择器有两种：相邻后兄弟选择器与普通后兄弟选择器。这个怎么理解呢。

如果将梁山108位好汉排名的话，这有点像是大哥“宋江”有个紧跟在后面的兄弟“卢俊义”(即相邻后兄弟);而“吴用”、“公孙胜”、“林冲”等后面的兄弟，只能算是普通后兄弟了。虽然今天不讨论前兄弟这事，但我们不得不承认：“宋江”还有个前兄弟“晁盖”。

要注意的是，在这两种情况中，当我们考虑元素之间的相邻特性时，非元素节点(比如元素之间的文本)都会被忽略。

相邻后兄弟选择器(adjacent sibling combinators)

相邻后兄弟选择器是CSS2中引入的，它用加号“+”将两个简单选择器序列隔开，这两个序列所代表的元素在文档树中有相同的父母元素，且第二个选择器序列所代表的元素必须紧跟在第一个选择器序列所代表的元素后面。

形式“A+B”的选择器，代表选择器序列B选中的元素是选择器A选中的元素的一个后兄弟元素，且必须紧跟在后面。

示例：

解释：

左侧代码中，相邻后兄弟选择器“p+div”选中了元素p后面紧跟的兄弟元素div，所以文字颜色变为红色;而其他的后兄弟元素不会被选中，所以文字颜色为默认的黑色。

普通后兄弟选择器(generalsibling combinators)

普通兄弟选择器是CSS3中引入的，它用波浪符号“~”将两个简单选择器序列隔开，这两个选择器序列所代表的元素在文档树中有相同的父母元素，且第二个选择器序列所代表的元素在第一个选择器序列所代表的元素后面(不要求紧跟在后面)。

形式“A~B”的选择器，代表选择器序列B选中的元素是选择器A选中的元素后面的所有后兄弟元素。

示例：

解释：

左侧代码中，普通后兄弟选择器“p~div”选中了元素p后面的两个兄弟，所以文字为红色;注意：这个选择器只会选中元素p的后兄弟，其前兄弟不会被选中。

至此，CSS复合选择器的内容差不多就这些了。给人的感觉好像是：交集选择器与并集选择器就是在重温高中数学知识“集合运算”，而关系选择器则更像是在熟悉“姓氏家谱”!