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 |