选择器列表 - CSS（层叠样式表） 编辑

CSS 选择器列表（,），常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。

/* 选择所有 <span> 和 <div> 元素 */
span, div {
  border: red 2px solid;
}

为了使样式表更简洁，可以使用逗号分隔的列表来对选择器进行分组。

语法

element, element, element { style properties }

例子

单行分组

在一行之中使用逗号为选择器分组。

h1, h2, h3, h4, h5, h6 { font-family: helvetica; }

多行分组

使用逗号对多行选择器进行分组。

#main,
.content,
article {
  font-size: 1.1em;
}

选择器列表无效化

使用选择器列表的一个缺点是，以下两段 CSS 代码并不不等价：

h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }

h1, h2:maybe-unsupported, h3 { font-family: sans-serif }

这是因为，在选择器列表中如果有一个选择器不被支持，那么整条规则都会失效。

解决这个问题的一个方法是使用 :is() 选择器，它会忽视它的参数列表中失效的选择器，但是由于 :is()  会影响优先级的计算方式，这么做的代价是，其中的所有选择器都会拥有相同的优先级。

h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }

:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }

规范

规范	状态	备注
Selectors Level 4 Selector Lists	Working Draft	重命名为“选择器列表”（"selector list"）
CSS Level 1 grouping	Recommendation	初始定义

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• :is()  和 :where()  伪类，它们能避免选择器列表无效化的遗留设计错误。