CSS 选择器
CSS 选择器 模块定义了选择元素的模式，然后将一组 CSS 规则及其specificity 应用于这些元素。CSS 选择器模块为我们提供了 60 多个选择器和五个组合器。其他模块 提供了额外的伪类选择器和伪元素。
在 CSS 中，选择器是用于匹配或选择要设置样式的元素的模式。选择器也用于 JavaScript 中，以选择要作为NodeList 返回的 DOM 节点。
无论是在 CSS 中还是在 JavaScript 中使用，选择器都允许根据元素类型、属性、当前状态甚至在 DOM 中的位置来定位 HTML 元素。组合器允许您通过基于元素与其 他元素的关系来选择元素，从而在选择元素时更加精确。
参考
组合器和分隔符
选择器
:active:any-link:autofill:blank:buffering:checked:current:current():default:defined:dir():disabled:empty:enabled:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:future:has():hover:indeterminate:in-range:invalid:is():lang():last-child:last-of-type:link:local-link:matches()(:is()的过时遗留选择器别名):modal:muted:not():nth-child():nth-of-type():nth-last-child():nth-last-of-type():only-child:only-of-type:optional:out-of-range:past:paused:picture-in-picture:placeholder-shown:playing:read-only:read-write:required:root:scope:seeking:stalled:target:target-within:user-invalid:user-valid:valid:visited:volume-locked:where():-webkit-伪类- 属性选择器
- 类选择器
- ID 选择器
- 类型选择器
- 通用选择器
术语
指南
- CSS 选择器和组合器
-
概述 CSS 选择器和 CSS 伪模块中定义的不同类型的简单选择器和各种组合器。
- CSS 选择器结构
-
解释 CSS 选择器结构和 CSS 选择器模块中介绍的术语，从“简单选择器”到“宽容的相对选择器列表”。
- 伪类
-
列出各种 CSS 模块和 HTML 中定义的伪类，这些选择器允许根据文档树中不包含的状态信息来选择元素。
- 学习：CSS 选择器
-
作为 CSS 构建块的一部分，包括关于类型、类和 ID 选择器、属性选择器、伪类和伪元素、组合器、级联、特异性和继承 以及 级联层 的教程。
- 在选择器中使用
:target伪类 -
学习如何使用
:target伪类来设置 URL 片段标识符的目标元素的样式。 - 学习：UI 伪类
-
学习不同状态下用于设置表单样式的可用 UI 伪类。
- 使用选择器定位 DOM 元素
-
选择器 API 允许在 JavaScript 中使用选择器从 DOM 中检索元素节点。
相关概念
:popover-open伪类state()伪类- CSS 嵌套 模块
- CSS 作用域 模块
:host伪类:host()伪类:host-context()伪类::slotted伪元素
- CSS 伪元素模块（代表 HTML 中未包含的实体）
- CSS 阴影部分模块
::part伪元素
- CSS 定位布局模块
- 其他 伪元素
@namespaceat 规则!important- 特异性
- 级联
Document.querySelector方法Document.querySelectorAll方法NodeList.forEach()方法
规范
| 规范 |
|---|
| 选择器级别 4 |