這些看似微不足道的 CSS 選取器語法新增項目, 將會產生巨大影響
編寫 CSS 時,有時可能會產生較長的選取器清單,以相同的樣式規則指定多個元素。舉例來說,如要調整標題元素內任何 <b>
標記的顏色,您可以編寫以下內容:
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
color: hotpink;
}
您可以改用 :is()
提高易讀性,同時避免使用冗長的選取器:
:is(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
易讀性和較短的選取器便利性只是 :is()
和 :where()
為 CSS 提供的值的一部分。本文將探討這兩個功能性虛擬選取器的語法和值。
瀏覽器相容性
:is()
:where()
與:is()
和:where()
見面
這些是功能虛擬類別選取器,請注意結尾的 ()
,以及開頭為 :
的方法。這就像是比對元素的執行階段動態函式呼叫。編寫 CSS 時,您可以利用這些條件將選取器中間、開頭或結尾處歸入同一個群組。這些類別也可以變更明確性,讓您找回空值或增加明確性。
選取器分組
:is()
可對分組執行的任何操作,因此可以 :where()
。這包括在選取器的任何位置使用、巢狀結構和堆疊。客戶熟悉且喜愛的完整 CSS以下列舉數例:
/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
/* in the middle */
article :is(header,footer) > p {
color: gray;
}
/* at the end */
.dark-theme :where(button,a) {
color: rebeccapurple;
}
/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
color: rebeccapurple;
}
/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
text-transform: uppercase;
}
/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
font-weight: 900;
}
上述每個選取器範例都示範這兩個功能虛擬類別的彈性。找出程式碼中可受益於 :is()
或 :where()
的區域,請找出包含多個逗號和選取器重複的選取器。
搭配 :is()
使用簡單又複雜的選取器
如要進一步瞭解選取器,請參閱 Learning CSS 的選取器模組。以下列舉幾個簡單和複雜的選取器範例,協助您說明相關功能:
article > :is(p,blockquote) {
color: black;
}
:is(.dark-theme.hero > h1) {
font-weight: bold;
}
article:is(.dark-theme:not(main .hero)) {
font-size: 2rem;
}
到目前為止,:is()
和 :where()
的語法可以互換。接著就來看看兩者有何不同
:is()
和 :where()
的差異
具體來說,:is()
和 :where()
的成效差異很大。如要複習詳細內容,請參閱瞭解 CSS 的特許模組。
簡單來說
:where()
沒有明確性。:where()
會將選取器清單中所有明確性視為功能參數傳遞。這是第一個種類選取器功能。:is()
會採用其最具體選取器的特異性。:is(a,div,#id)
的 ID 明確分數為 100 分。
我對分組很感興趣時,從清單上決定最高明確性選取器是不是問題。我一直能將高明確性選取器移到自己的選取器上,這些選取器不會造成太大的影響,這樣我隨時都能提升介面的易讀性。以下為我的意思範例:
article > :is(header, #nav) {
background: white;
}
/* better as */
article > header,
article > #nav {
background: white;
}
透過 :where()
,我正在等待程式庫提供沒有具體需求的版本。因此,作者樣式和圖書館樣式之間的特有競爭可能會成為最後。但是在編寫 CSS 時,完全不需要與競爭對手競爭。
CSS 一直以來都研究過類似的分組功能,這項功能已經在這個領域中,但本來還多不開放探索。試著製作更小的樣式表,並移除逗號,盡情發揮創意。
相片來源:Markus Winkler,發表於 Unsplash 網站上