全新 CSS 函式虛擬類別選取器 :is() 和 :where()

這些看似微不足道的 CSS 選取器語法新增項目， 將會產生巨大影響

Adam Argyle

編寫 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() 呈現使用前後的無限視覺圖像

瀏覽器相容性

:is()

瀏覽器支援

  • 88
  • 88
  • 78
  • 14

資料來源

:where()

瀏覽器支援

  • 88
  • 88
  • 78
  • 14

資料來源

與: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 網站上