使用 :where() 告別複雜的選擇器

什麼是 :where()？

將 :where() 視為 CSS 工具箱中的強大工具，可讓您將多個選擇器分組為一個簡潔的表達式。它對於將樣式應用於與任何指定選擇器匹配的元素特別有用，而無需擔心特異性衝突。

基本文法：

element:where(selector1, selector2, ...) {
  /* Styles to be applied */
}

範例：
假設您想要設定所有

的樣式具有類別突出顯示或類別重要的元素。您可以像這樣使用 :where() ：

p:where(.highlight, .important) {
  font-weight: bold;
  color: red;
}

為什麼要使用:where()？

1. 提高可讀性：
   • 讓您的 CSS 更簡潔、更容易理解。
2. 特異性控制：
   • 幫助您更輕鬆地覆蓋樣式，因為 :where() 的特異性為零。
3. 增強的可維護性：
   • 透過將選擇器分組，您可以讓 CSS 更加模組化且更易於維護。

現實範例：
想像一下您有一個有導覽列的網站。您想要以不同的方式設定活動導覽連結的樣式。您可以使用 :where() 來定位 :hover 和 :active 狀態：

nav a:where(:hover, :active) {
  background-color: #f0f0f0;
  color: #333;
}

結論：
透過理解並有效地使用 :where()，您可以編寫更有效率、可維護且優雅的 CSS 程式碼。對於任何 Web 開發人員來說，它都是一個有價值的工具。

利用 :where() 進行複雜選擇器

雖然 :where() 非常適合簡單的選擇器分組，但與複雜的選擇器一起使用時它會變得更加強大。

範例：設定特定表格儲存格的樣式
假設您想要根據特定表格儲存格的內容和位置設定其樣式。您可以使用 :where() 組合多個選擇器：

table td:where(
  :nth-child(2),
  :contains("Important")
) {
  background-color: yellow;
  font-weight: bold;
}

此程式碼將為每個表格儲存格的第二個子單元以及包含單字「重要」的任何儲存格設定樣式。

將 :where() 與其他偽類結合

您也可以將 :where() 與其他偽類結合起來以建立更具體的選擇器：

a:where(:hover, :focus) {
  text-decoration: underline;
  color: blue;
}

此程式碼將設定錨連結的 :hover 和 :focus 狀態的樣式。

使用的最佳實踐：where()

1. 明智地使用它：不要過度使用 :where()，因為它會讓你的 CSS 更難以閱讀和維護。
2. 優先考慮特異性：雖然 :where() 的特異性為零，但在編寫 CSS 時考慮特異性仍然很重要。
3. 徹底測試：始終在不同的瀏覽器中測試您的 CSS 以確保相容性。

結論：
:where() 偽類對於現代 CSS 來說是一個很有價值的工具。透過掌握它的用法，你可以寫出更有效率、可維護、優雅的 CSS 程式碼。

以上是使用 :where() 告別複雜的選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！