选择器列表
CSS **选择器列表** (,
) 选择所有匹配的节点。选择器列表是用逗号分隔的选择器列表。
描述
当多个选择器共享相同的声明时,可以将它们分组到逗号分隔的列表中。选择器列表也可以作为某些函数式 CSS 伪类的参数传递。逗号前后可以出现空格。
以下三个声明等效
css
span {
border: red 2px solid;
}
div {
border: red 2px solid;
}
css
span,
div {
border: red 2px solid;
}
css
:is(span, div) {
border: red 2px solid;
}
示例
将相同的样式应用于匹配不同条件的元素时,将选择器分组到逗号分隔的列表中可以提高一致性,同时减少样式表的大小。
单行分组
此示例显示了使用逗号分隔的列表在单行中分组选择器。
css
h1, h2, h3, h4, h5, h6 {
font-family: helvetica;
}
多行分组
此示例显示了使用逗号分隔的列表在多行中分组选择器。
css
#main,
.content,
article,
h1 + p {
font-size: 1.1em;
}
有效和无效的选择器列表
无效选择器列表
使用选择器列表的一个缺点是,选择器列表中单个不支持的选择器会使整个规则失效。
考虑以下两个 CSS 规则集
css
h1 {
font-family: sans-serif;
}
h2:invalid-pseudo {
font-family: sans-serif;
}
h3 {
font-family: sans-serif;
}
css
h1,
h2:invalid-pseudo,
h3 {
font-family: sans-serif;
}
它们并不等效。在第一个规则集中,样式将应用于 h1
和 h3
元素,但 h2:invalid-pseudo
规则不会被解析。在第二个规则集中,由于列表中的一个选择器无效,因此整个规则都不会被解析。因此,不会将任何样式应用于 h1
和 h3
元素,因为当选择器列表中的任何选择器无效时,整个样式块都会被忽略。
宽松选择器列表
解决 无效选择器列表 问题的一种方法是使用 :is()
或 :where()
伪类,它们接受宽松选择器列表。宽松选择器列表中的每个选择器都会被单独解析。因此,列表中的任何无效选择器都会被忽略,而有效选择器会被使用。
继续上一个示例,以下两个 CSS 规则集现在等效
css
h1 {
font-family: sans-serif;
}
h2:maybe-unsupported {
font-family: sans-serif;
}
h3 {
font-family: sans-serif;
}
css
:is(h1, h2:maybe-unsupported, h3) {
font-family: sans-serif;
}
两者之间的区别在于 :is()
的特异性是其最具体参数,而 :where()
选择器和宽松选择器列表参数不会增加任何特异性权重。
相对选择器列表
规范
规范 |
---|
选择器级别 4 # 分组 |
浏览器兼容性
BCD 表格仅在浏览器中加载