CSS并集选择器是CSS中用于同时匹配多个不同选择器的语法规则，通过它可以让多个不相关的选择器应用相同的样式，避免重复编写相同的CSS代码，是前端样式开发中提升代码复用性的常用工具。
CSS并集选择器的基本语法
CSS并集选择器的语法非常简单，只需要将多个需要共享样式的选择器用逗号分隔，然后编写统一的样式规则即可，基本结构如下：
/* 选择器1, 选择器2, 选择器3 {
样式属性: 属性值;
} */
h1, h2, h3 {
color: #333;
font-weight: normal;
}
上面的代码中，h1、h2、h3三个选择器通过逗号分隔组成并集选择器，这三个标签都会应用颜色为深灰色、字体粗细为正常的样式。
支持的选择器类型
并集选择器中可以包含任意合法的CSS选择器，常见的类型包括：
- 元素选择器：如
div、p、span等 - 类选择器：如
.active、.box等 - ID选择器：如
#header、#footer等 - 属性选择器：如
input[type="text"]、a[href]等 - 伪类选择器：如
:hover、:focus等
下面是一个混合多种选择器的并集选择器示例：
/* 元素选择器、类选择器、ID选择器、伪类选择器组合 */
div, .card, #main-title, a:hover {
margin: 10px;
padding: 8px;
border-radius: 4px;
}
常见使用场景
统一重置基础样式
在开发项目时，经常需要对一些默认有浏览器自带样式的元素进行重置，使用并集选择器可以快速完成这个工作：
/* 重置多个元素的默认内外边距 */
body, h1, h2, h3, h4, p, ul, ol, li {
margin: 0;
padding: 0;
}
复用相同样式模块
当页面中有多个不同的模块需要应用相同的样式时，不需要分别给每个模块写样式，用并集选择器就可以统一设置：
/* 按钮、链接、输入框的相同基础样式 */
.btn, .link-btn, input[type="button"] {
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 16px;
font-size: 14px;
cursor: pointer;
border: 1px solid #ddd;
background-color: #fff;
}
响应式适配统一调整
在响应式开发中，当多个元素在小屏幕下需要统一调整样式时，也可以用并集选择器实现：
/* 屏幕宽度小于768px时的样式调整 */
@media (max-width: 768px) {
.nav-item, .sidebar, .content-box {
width: 100%;
margin-bottom: 12px;
}
}
使用注意事项
- 选择器之间必须用英文逗号分隔，中文逗号会导致语法错误，样式无法生效。
- 并集选择器的优先级遵循CSS优先级的计算规则，每个选择器的优先级单独计算，不会因为组合而提升优先级。
- 如果并集选择器中的某个选择器不存在，不会影响其他选择器的样式生效，浏览器会自动忽略不存在的选择器。
- 不要过度使用并集选择器，如果多个选择器没有实际的样式共性，强行组合会降低代码的可读性。
优先级计算示例
我们可以通过一个示例来看并集选择器的优先级计算：
/* 并集选择器，两个选择器的优先级分别为0,1,0和0,0,1 */
.box, p {
color: red;
}
/* 单独的类选择器，优先级0,1,0 */
.box {
color: blue;
}
上面的代码中，.box元素的文本颜色会是蓝色，因为单独的.box选择器优先级和并集选择器中的.box优先级相同，后面的样式会覆盖前面的样式，而p元素的文本颜色会是红色，因为并集选择器中的p选择器生效。