CSS 選擇器
CSS 選擇器模組定義了用於選擇元素的模式，然後會為這些元素應用一組 CSS 規則及其優先順序。CSS 選擇器模組為我們提供了 60 多個選擇器和 5 個組合器。其他模組提供了額外的偽類選擇器和偽元素。
在 CSS 中，選擇器是用於匹配或選擇你想要設定樣式的元素的模式。在 JavaScript 中，選擇器也用於選擇要作為 NodeList 返回的 DOM 節點。
選擇器，無論是在 CSS 還是 JavaScript 中使用，都可以根據 HTML 元素的型別、屬性、當前狀態，甚至在 DOM 中的位置來定位它們。組合器允許你透過基於元素與其他元素的關係來選擇元素，從而更精確地進行選擇。
參考
組合器和分隔符
CSS 選擇器模組還引入了列組合器（||）。目前，沒有瀏覽器支援此功能。
選擇器
:active:any-link:autofill:buffering:checked:default:defined:dir():disabled:empty:enabled:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:future:has():hover:in-range:indeterminate:invalid:is():lang():last-child:last-of-type:link:matches()（已過時的舊版選擇器，是:is()的別名）:modal:muted:not():nth-child():nth-of-type():nth-last-child():nth-last-of-type():only-child:only-of-type:open:optional:out-of-range:past:paused:picture-in-picture:placeholder-shown:playing:popover-open:read-only:read-write:required:root:scope:seeking:stalled:target:user-invalid:user-valid:valid:visited:volume-locked:where():-webkit-偽類- 屬性選擇器
- 類選擇器
- ID 選擇器
- 型別選擇器
- 通用選擇器
CSS 選擇器模組還引入了 :blank、:current 和 :local-link 偽類。目前，沒有瀏覽器支援這些功能。
術語
指南
- CSS 選擇器和組合器
-
概述 CSS 選擇器和 CSS 偽類模組中定義的不同型別的簡單選擇器和各種組合器。
- CSS 選擇器結構
-
解釋 CSS 選擇器的結構以及 CSS 選擇器模組中引入的術語，範圍從“簡單選擇器”到“容錯相對選擇器列表”。
- 偽類
-
列出了在各種 CSS 模組和 HTML 中定義的偽類，這些選擇器允許根據文件樹中未包含的狀態資訊來選擇元素。
- 在選擇器中使用
:target偽類 -
學習如何使用
:target偽類來為 URL 片段識別符號的目標元素設定樣式。 - 隱私與
:visited選擇器 -
探討了為了使用者隱私而對
:visited類設定的樣式限制。 - CSS 構建塊：CSS 選擇器
-
介紹基本的 CSS 選擇器，包括關於型別、類和 ID 選擇器、屬性選擇器、偽類和偽元素以及組合器的教程。
- 學習：UI 偽類
-
學習可用於為不同狀態下的表單設定樣式的不同 UI 偽類。
- DOM 樹上的選擇與遍歷
-
選擇器 API 允許在 JavaScript 中使用選擇器從 DOM 中檢索元素節點。
相關概念
-
state()偽類 -
CSS 巢狀模組
-
CSS 作用域模組
:host偽類:host()偽類:host-context()偽類:has-slotted偽類::slotted偽元素
-
CSS overflow 模組
-
CSS 多列布局模組
-
CSS 分頁媒體模組
-
CSS 偽元素模組（表示 HTML 中未包含的實體）
-
::part偽元素
-
其他偽元素
-
@namespace@規則 !important
規範
| 規範 |
|---|
| 選擇器 Level 4 |