CSS 分组选择器 Grouping selectors

Docs

选择器列表 - CSS | MDN (mozilla.org)

选择器列表 Selector list：, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。

• 语法：A, B
• 示例：div, span 会同时匹配 <span> 元素和 <div> 元素。

选择器列表 Selector list

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

CSS 选择器列表（,）选择所有匹配的节点。选择器列表是以逗号分隔的多个选择器所组成的列表。

当多个选择器共享相同的声明时，它们可以被编组进一个以逗号分隔的列表。选择器列表也可以作为参数传递给一些函数式 CSS 伪类。逗号之前和/或之后可以有空白（字符）。

以下三个声明是等效的：

One

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

Two

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

Three

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

当对匹配不同条件的元素应用相同的样式时，将选择器编组进一个以逗号分隔的列表中可以在提高样式表的一致性的同时减小尺寸。

单行编组

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

多行编组

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

无效的选择器列表

使用选择器列表的一个缺点是选择器列表中的单个不受支持的选择器会使整个规则无效化 (整个样式块将被忽略)。当一个选择器列表包含一个无效的选择器 (匹配不到任何东西) 时，整个样式块将被忽略，除了接受可容错选择器列表的函数式伪类。

• 可容错选择器列表：解决无效的选择器列表问题的一种方法是使用 :is() 或 :where() 伪类，它们接受一个可容错选择器列表。可容错选择器列表中的每个选择器都被单独解析。因此列表中任何无效的选择器会被忽略，而有效的选择器则会被有效使用。这两个的区别在于 :is() 的优先级是它最具体的参数，而 :where() 选择器和可容错选择器列表参数则不添加任何优先级权重。

• 可容错相对选择器列表：类似于可容错选择器列表；它只是将列表的组成部分按相对选择器来解析，以显式或隐式的组合器开头。