导读：本小节主要讲解了 CSS 选择器中的第三种分类 —— 组合选择器。通过本小节的学习，可以很好地掌握组合选择器的用法，也可以对之前已经学习的 CSS 选择器的用法做个回顾和总结。
组合选择器概述
组合选择器是将之前学习的 CSS 选择器用法综合在一起的一种用法，从定位 HTML 元素的结果上可分为如下 2 种：
组合（并集）选择器
组合（交集）选择器
组合（并集）选择器
组合（并集）选择器就是不同选择器的相同 CSS 声明合并在一起，从而得到更为简洁的样式表。例如如果要为<h1>至<h6>标题元素设定相同的背景颜色，可以如下示例代码所示：
1h1{color:blue; }
2h2{color:blue; }
3h3{color:blue; }
4h4{color:blue; }
5h5{color:blue; }
6h6{color:blue; }
这时我们可以看到上述 CSS 使用了类型选择器，但元素名称不同，并且 CSS 声明完全一致。那么，上述示例代码可以通过组合（并集）选择器进行改写如下所示：
1h1,h2,h3,h4,h5,h6{color:blue; }
上述两段示例代码的作用是一致的，第二段示例代码展示的就是组合（并集）选择器的用法。
组合（并集）选择器是使用逗号（,）分隔不同的选择器，并为这些不同的选择器定义相同的 CSS 声明。组合（并集）选择器的语法结构如下所示：
1选择器1, 选择器2, ... ... {
2属性 : 属性值;
3}
组合（交集）选择器
组合（交集）选择器就是先通过第一个选择器定位 HTML 元素集，再通过第二个选择器从上述 HTML 元素集再次筛选定位 HTML 元素集，如此反复，直到最后一个选择器执行完毕。
例如如果我们要为所有 class 属性值为 cls 的<p>元素设定 CSS 样式的话，具体实现的代码如下所示：
1p.cls{
2color: blueviolet;
3}
如上述示例所示，展示了组合（交集）选择器的用法。
组合（交集）选择器在多个选择器之间不需要任何分隔符进行分隔，只需要将多个选择器依次编写即可。组合（交集）选择器的语法结构如下所示：
1选择器1选择器2... ... {
2属性 : 属性值;
3}
说明：组合（交集）选择器中多个选择器的执行顺序是按照编写的先后顺序执行的。
总结
本小节讲解了 CSS 选择器中的组合选择器，其中包含组合（并集）选择器和组合（交集）选择器。这两种选择器具有如下特点：
都综合了之前学习的 CSS 选择器的用法。
是按照定位 HTML 元素的结果进行划分种类的。
网友评论