选择器列表

描述

当多个选择器共享相同的声明时，它们可以被分组到一个逗号分隔的列表中。选择器列表也可以作为参数传递给一些函数式 CSS 伪类。逗号的前后可以有空格。

以下三个声明是等效的

span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

:is(span, div) {
  border: red 2px solid;
}

示例

当对符合不同条件的元素应用相同样式时，将选择器分组到逗号分隔的列表中可以提高一致性，同时减小样式表的大小。

单行分组

此示例演示了如何使用逗号分隔列表将选择器分组到单行中。

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica", "Arial";
}

多行分组

此示例演示了如何使用逗号分隔列表将选择器分组到多行中。

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

有效和无效的选择器列表

无效的选择器代表，因此不匹配任何东西。当选择器列表包含一个无效选择器时，整个样式块都会被忽略，除了接受容错选择器列表的 :is() 和 :where() 伪类。

无效选择器列表

使用选择器列表的一个缺点是，选择器列表中的单个不受支持的选择器会使整个规则失效。

考虑以下两个 CSS 规则集

h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}

h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}

它们不是等效的。在第一个规则集中，样式将应用于 h1 和 h3 元素，但 h2:invalid-pseudo 规则不会被解析。在第二个规则集中，由于列表中的一个选择器无效，整个规则将不会被解析。因此，h1 和 h3 元素将不会应用任何样式，因为当选择器列表中的任何选择器无效时，整个样式块都会被忽略。

容错选择器列表

解决无效选择器列表问题的一种方法是使用 :is() 或 :where() 伪类，它们接受容错选择器列表。容错选择器列表中的每个选择器都会单独解析。因此，列表中的任何无效选择器都会被忽略，而有效选择器则会使用。

承接上一个示例，以下两个 CSS 规则集现在是等效的

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;
}

两者的区别在于 :is() 的特异性是其最具体的参数，而 :where() 选择器和容错选择器列表参数不增加任何特异性权重。

相对选择器列表

相对选择器列表是一个逗号分隔的选择器列表，解析为相对选择器，它以显式或隐式组合符开头。

h2:has(+ p, + ul.red) {
  font-style: italic;
}

在上面的示例中，斜体样式将应用于紧跟在 <p> 或 <ul class="red"> 之后的任何 h2 标题。请注意，伪元素和 :has() 选择器在 :has() 相对选择器列表中无效。

规范

浏览器兼容性

另见

• :is() 和 :where() 伪类接受容错选择器列表。
• :not() 伪类接受常规选择器列表
• :has() 伪类接受相对选择器列表。
• CSS 选择器