[筆記] CSS – 偽類 :is() 和 :where() 的用法及差異

:is() 和 :where() 是兩個功能強大的偽類選擇器，它們都可以用來簡化選擇器列表的寫法，讓程式碼更簡潔。不過，它們之間有一些關鍵的差異，特別是在特異性 (specificity) 的處理方式上。

1. :is() 的用法

• 功能：:is() 接受一組選擇器作為參數，並匹配符合其中任一選擇器的元素。

• 語法：:is(選擇器1, 選擇器2, 選擇器3, …)

• 特點：

1. 它會採用參數中特異性最高的選擇器來計算整體的特異性。
2. 如果某個選擇器無效，:is() 仍然有效，無效的選擇器會被忽略。

• 範例：

/* 匹配 <h1> 或 <h2> 內的 .highlight 元素 */
:is(h1, h2) .highlight {
  color: blue;
}

在這個例子中，:is(h1, h2) 的特異性取決於 h1 或 h2（這裡兩者特異性相同，都是 0,1,0），而不是 0,0,0。

---

2. :where() 的用法

• 功能：:where() 同樣接受一組選擇器作為參數，匹配符合其中任一選擇器的元素。

• 語法：:where(選擇器1, 選擇器2, 選擇器3, …)

• 特點：

1. 它的特異性始終為 0,0,0，無論內部的選擇器特異性多高。
2. 與 :is() 一樣，如果某個選擇器無效，仍然會忽略該選擇器。

• 範例：

/* 匹配 <h1> 或 <h2> 內的 .highlight 元素 */
:where(h1, h2) .highlight {
  color: red;
}

在這個例子中，:where(h1, h2) 的特異性是 0,0,0，整個選擇器的特異性只來自 .highlight（0,1,0）。

---

3. :is() 和 :where() 的差異

特性	:is()	:where()
特異性	採用參數中特異性最高的選擇器	特異性始終為 0,0,0
使用場景	需要保留選擇器特異性時	需要忽略選擇器特異性時
靈活性	更適合動態調整樣式優先級	更適合統一低特異性的基礎樣式

特異性差異範例：

:is(section, article) .text {
  color: green;
}
:where(section, article) .text {
  color: purple;
}

• • :is(section, article) 的特異性是 0,1,0（來自 section 或 article）。
  • :where(section, article) 的特異性是 0,0,0。
  • 如果兩者同時作用於同一個元素，:is() 的樣式會覆蓋 :where()，因為特異性更高。

---

實際應用場景

• :is()

1. 需要簡化選擇器列表，且希望保留特異性來控制樣式優先級時。
2. 範例：統一處理多個標籤下的子元素樣式。

:is(header, footer, main) a {
  text-decoration: none;
}

• :where()

1. 希望樣式容易被覆蓋（低特異性），例如在設計基礎樣式或框架時。
2. 範例：統一清除某些標籤的預設樣式。

:where(h1, h2, h3) {
  margin: 0;
}

---

總結

• :is() 適合需要靈活控制特異性的場景，它會「繼承」最高的特異性。
• :where() 適合需要低特異性、可輕易覆蓋的場景，它的特異性固定為零。
• 兩者都能讓 CSS 更簡潔易讀，選擇哪個取決於你對樣式優先級的需求。