選擇器列表

描述

當多個選擇器共享相同的宣告時，它們可以被分組到一個逗號分隔的列表中。選擇器列表也可以作為引數傳遞給一些函式式 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 選擇器