全新 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()

瀏覽器支援

  • Chrome：88。
  • Edge：88。
  • Firefox：78。
  • Safari：14.

資料來源

:where()

瀏覽器支援

  • Chrome：88。
  • Edge：88。
  • Firefox：78。
  • Safari：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() 搭配簡單和複雜的選取器

如需選取器快速查看選取器，請參閱學習課程中的選取器單元 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() 會壓縮選取器清單中以函式參數傳遞的所有特定性。這是 Google 試算表 種類選取器功能
  • :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 網站上