選擇器列表（Selector List），又稱「分組選擇器」或「並集選擇器」，允許多個選擇器共享相同的樣式。

其實就像在一場派對上分組一樣，你可以把喜歡狗的人放在一邊，他們有球、飛盤、牽繩；另一邊是愛貓的人，他們帶著逗貓棒、貓草、小魚乾。不管是哪一組，大家都用相同的樣式『裝扮』自己，無論是毛茸茸的朋友還是主人，這就是分組選擇器的魅力～

💠選擇器列表-基本用法

語法

• 選擇器列表有兩種寫法，可以使用逗號隔開選擇器，或使用 :is 虛擬類別選擇器

寫法一：用逗號隔開選擇器

選擇器1, 選擇器2, 選擇器3,…選擇器n {
	屬性名: 屬性值;
}

寫法二：使用 :is 虛擬類別選擇器

:is(選擇器1, 選擇器2, 選擇器3,…選擇器n) {
	屬性名: 屬性值;
}

範例

假設我們有相同樣式的 <span> 和 <div> 元素，初學者可能會這樣寫：

span {
  border: red 2px solid;
}

div {
  border: red 2px solid;
}

使用選擇器列表可以直接讓它們共享樣式

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

或使用 :is

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

這兩種寫法在上述範例中效果相同，但在某些情況下會有不同的結果。例如，當選擇器列表中包含無效選擇器時，如 div:invalid-pseudo，這在 CSS 中是不存在的選擇器。如下所示，這種情況會導致所有樣式無效，<span> 和 <div> 都不會被加上樣式：

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

然而，如果使用 :is，無效選擇器會被忽略，而有效選擇器仍然會應用樣式：

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

💠實務應用：共用相同樣式

還記得前面在類選擇器時用到的紅綠燈範例嗎？當初是使用多個類別來共享樣式：

<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>

.red {
  background-color: #d71919;
}

.yellow {
  background-color: #ffe100;
}

.green {
  background-color: #05a005;
}

.light {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

我們也可以使用選擇器列表來達成相同的效果：

<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>

.red {
  background-color: #d71919;
}

.yellow {
  background-color: #ffe100;
}

.green {
  background-color: #05a005;
}

.red, .yellow, .green {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

也可以使用 :is 來實現：

:is(.red, .yellow, .green) {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

💠總結

• 選擇器列表可以將多個選擇器組合起來，共享相同的樣式。
• 選擇器列表有兩種寫法：直接用逗號隔開，若包含無效選擇器，將導致所有樣式無效；或使用 :is 偽類，忽略無效選擇器，應用有效樣式。

本文將同步更新至 Lala Code