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