:is()
and :where()
是CSS偽選擇器具有相似功能,但特異性的差異很大。最近,由於更廣泛的瀏覽器支持,簡化了複雜的選擇器,因此:is()
獲得了知名度。但是:where()
在控制特異性方面具有至關重要的優勢。
:is()
繼承其最具體論證的特異性。這對於提高特異性而不添加額外的類別可能是有利的,如:
:is(.button,#增加#特殊性){ / *特異性提高 */ }
相反, :where()
總是具有零特異性,而不論其論點如何。這對於在較高特異性選擇器可能無意中覆蓋更通用樣式的情況下降低特異性特別有用。考慮此示例:
.card:is(.title,p){ / *由於.title * / 顏色:紅色; } .Card P { / *較低特異性 * / 顏色:黃色; }
在這裡, red
勝利是由於:is()
的繼承特異性。切換到:where()
改變結果:
.Card:where(.title,p){ / *零特異性 * / 顏色:紅色; } .Card P { / *較低的特異性,但仍然贏了 * / 顏色:黃色; }
現在, yellow
佔上風,因為:where()
的特異性較低。
選擇:is()
和:where()
取決於您的特定需求。通常,首先為了簡單而開始使用:is()
。但是,如果遇到特異性衝突, :where()
提供了一種強大的工具來管理和降低特異性,以防止意外的樣式覆蓋。雖然通常首選低特異性, :where()
可能引入其自身的複雜性。因此,平衡方法是關鍵 - 使用:is()
除非您需要以下提供的精確特異性控制:where()
。
以上是:where()也有一個很酷的特異性技巧。的詳細內容。更多資訊請關注PHP中文網其他相關文章!