將 :where() 視為 CSS 工具箱中的強大工具,可讓您將多個選擇器分組為一個簡潔的表達式。它對於將樣式應用於與任何指定選擇器匹配的元素特別有用,而無需擔心特異性衝突。
基本文法:
element:where(selector1, selector2, ...) { /* Styles to be applied */ }
範例:
假設您想要設定所有
的樣式具有類別突出顯示或類別重要的元素。您可以像這樣使用 :where() :
p:where(.highlight, .important) { font-weight: bold; color: red; }
現實範例:
想像一下您有一個有導覽列的網站。您想要以不同的方式設定活動導覽連結的樣式。您可以使用 :where() 來定位 :hover 和 :active 狀態:
nav a:where(:hover, :active) { background-color: #f0f0f0; color: #333; }
結論:
透過理解並有效地使用 :where(),您可以編寫更有效率、可維護且優雅的 CSS 程式碼。對於任何 Web 開發人員來說,它都是一個有價值的工具。
雖然 :where() 非常適合簡單的選擇器分組,但與複雜的選擇器一起使用時它會變得更加強大。
範例:設定特定表格儲存格的樣式
假設您想要根據特定表格儲存格的內容和位置設定其樣式。您可以使用 :where() 組合多個選擇器:
table td:where( :nth-child(2), :contains("Important") ) { background-color: yellow; font-weight: bold; }
此程式碼將為每個表格儲存格的第二個子單元以及包含單字「重要」的任何儲存格設定樣式。
您也可以將 :where() 與其他偽類結合起來以建立更具體的選擇器:
a:where(:hover, :focus) { text-decoration: underline; color: blue; }
此程式碼將設定錨連結的 :hover 和 :focus 狀態的樣式。
使用的最佳實踐:where()
結論:
:where() 偽類對於現代 CSS 來說是一個很有價值的工具。透過掌握它的用法,你可以寫出更有效率、可維護、優雅的 CSS 程式碼。
以上是使用 :where() 告別複雜的選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!