伪类
CSS 伪类 是添加到选择器上的一个关键字，它允许您样式化所选元素（或多个元素）的特定状态。例如，伪类 :hover 可用于在用户指针悬停在按钮上时选择该按钮，然后可以对这个选中的按钮进行样式设置。
/* Any button over which the user's pointer is hovering */
button:hover {
color: blue;
}
伪类由一个冒号 (:) 后跟伪类名称（例如 :hover）组成。功能性伪类还包含一对括号来定义参数（例如 :dir()）。伪类所附加的元素被定义为 锚定元素（例如 button:hover 中的 button）。
伪类不仅允许您根据文档树的内容对元素应用样式，还可以根据外部因素（例如导航器历史记录 (例如 :visited)）、其内容的状态（例如某些表单元素上的 :checked）或鼠标的位置（例如 :hover，它允许您知道鼠标是否悬停在元素上）来应用样式。
注意：与伪类不同，伪元素可用于样式化元素的 特定部分。
元素伪类
这些伪类与元素的核心身份相关。
元素显示状态伪类
这些伪类根据元素的显示状态启用元素的选定。
:open-
匹配一个可以打开或关闭且当前打开的元素。
:popover-open-
匹配当前处于显示状态的弹出元素。
:modal-
匹配处于一种状态的元素，在该状态下它排除与外部元素的所有交互，直到交互被解除。
:fullscreen-
匹配当前处于全屏模式的元素。
:picture-in-picture-
匹配当前处于画中画模式的元素。
输入伪类
这些伪类与表单元素相关，并根据 HTML 属性以及字段在交互前后的状态来选择元素。
:enabled-
表示处于启用状态的用户界面元素。
:disabled-
表示处于禁用状态的用户界面元素。
:read-only-
表示用户无法更改的任何元素。
:read-write-
表示任何用户可编辑的元素。
:placeholder-shown-
匹配显示占位符文本的输入元素。例如，它将匹配
<input>和<textarea>元素中的placeholder属性。 :autofill-
匹配当浏览器自动填充
<input>时。 :default-
匹配一组元素中默认的一个或多个 UI 元素。
:checked-
匹配复选框和单选按钮等元素在打开时。
:indeterminate-
匹配处于不确定状态的 UI 元素。
:blank-
匹配空的、包含空字符串或其他空输入的
用户输入元素。 :valid-
匹配内容有效的元素。例如，类型为“email”的输入元素，其中包含格式正确的电子邮件地址，如果控件不是必需的，则为空值。
:invalid-
匹配内容无效的元素。例如，输入了名称的类型为“email”的输入元素。
:in-range-
适用于具有范围限制的元素。例如，当所选值在允许范围内时，滑块控件。
:out-of-range-
适用于具有范围限制的元素。例如，当所选值超出允许范围时，滑块控件。
:required-
匹配当表单元素是必需的时。
:optional-
匹配当表单元素是可选的时。
:user-valid-
表示输入正确但仅在用户与它交互后才正确的元素。
:user-invalid-
表示输入不正确但仅在用户与它交互后才不正确的元素。
语言伪类
这些伪类反映了文档语言，并根据语言或脚本方向启用元素的选定。
位置伪类
这些伪类与链接以及当前文档中的目标元素相关。
:any-link-
如果元素匹配
:link或:visited，则匹配该元素。 :link-
匹配尚未访问的链接。
:visited-
匹配已访问的链接。
:local-link-
匹配绝对 URL 与目标 URL 相同的链接。例如，指向同一页面的锚点链接。
:target-
匹配作为文档 URL 目标的元素。
:scope-
表示作为选择器匹配参考点的元素。
注意：曾定义但已从规范中删除的 :target-within 伪类，用于匹配是或包含文档 URL 目标的后代的元素。为此目的，请使用 :has(:target)。
资源状态伪类
这些伪类适用于能够处于播放状态的媒体，例如视频。
:playing-
表示正在播放的可播放元素。
:paused-
表示已暂停的可播放元素。
:seeking-
表示当前正在媒体资源中寻找播放位置的可播放元素。
:buffering-
表示正在播放但因正在下载媒体资源而暂时停滞的可播放元素。
:stalled-
表示正在播放但因无法下载媒体资源而停滞的可播放元素。
:muted-
表示已静音的发声元素。
:volume-locked-
表示音量级别被浏览器锁定的发声元素。
时间维度伪类
这些伪类适用于查看具有时间性的内容时，例如 WebVTT 字幕轨道。
树结构伪类
这些伪类与元素在文档树中的位置相关。
:root-
表示文档的根元素。在 HTML 中，这通常是
<html>元素。 :empty-
表示除了空白字符之外没有子级的元素。
:nth-child()-
使用
An+B符号从兄弟元素列表中选择元素。 :nth-last-child()-
使用
An+B符号从兄弟元素列表中选择元素，从列表末尾倒数。 :first-child-
匹配是其兄弟中第一个的元素。
:last-child-
匹配是其兄弟中最后一个的元素。
:only-child-
匹配没有兄弟的元素。例如，列表中没有其他列表项的列表项。
:heading()-
使用
An+B符号选择标题元素（<h1>-<h6>）。 :nth-of-type()-
使用
An+B符号从兄弟元素列表中选择与兄弟元素列表中特定类型匹配的元素。 :nth-last-of-type()-
使用
An+B符号从兄弟元素列表中选择与兄弟元素列表中特定类型匹配的元素，从列表末尾倒数。 :first-of-type-
匹配是其兄弟中第一个的元素，并且也匹配某个类型选择器。
:last-of-type-
匹配是其兄弟中最后一个的元素，并且也匹配某个类型选择器。
:only-of-type-
匹配没有选定类型选择器的兄弟的元素。
Shadow-DOM 结构伪类
这些伪类与 Shadow DOM 相关。
:host-
匹配 Shadow 树的 Shadow Host。
:host()-
匹配与
:host匹配并匹配所提供列表中的任何选择器的元素。 :host-context()-
在 Shadow Host 的上下文中选择 Shadow 树之外的元素。
:has-slotted-
匹配已分配内容的 slot 元素。
用户操作伪类
这些伪类需要用户进行一些交互才能应用，例如将鼠标指针悬停在元素上。
:hover-
匹配当用户使用指向设备指定项目时，例如将鼠标指针悬停在项目上。
:active-
匹配当项目被用户激活时。例如，当项目被点击时。
:focus-
匹配当元素获得焦点时。
:focus-visible-
匹配当元素获得焦点且用户代理识别出该元素应可见地获得焦点时。
:focus-within-
匹配适用于
:focus的元素，以及任何具有适用于:focus的后代的元素。 :target-current-
匹配当前滚动到的
scroll-marker-group的::scroll-marker伪元素，换句话说，是活动的滚动标记。
功能性伪类
这些伪类接受选择器列表或宽容选择器列表作为参数。
自定义状态伪类
这些伪类适用于自定义元素。
:state()-
匹配具有指定自定义状态的自定义元素。
页面伪类
这些伪类与打印文档中的页面相关，并与 @page at-rule 一起使用。
视图转换伪类
这些伪类与视图转换中涉及的元素相关。
:active-view-transition-
当视图转换正在进行中（活动）时匹配文档的根元素，并在转换完成后停止匹配。
:active-view-transition-type()-
当指定的视图转换正在进行中（活动）时匹配文档的根元素，并在转换完成后停止匹配。
语法
selector:pseudo-class {
property: value;
}
与常规类一样，您可以在选择器中链接任意数量的伪类。
字母顺序索引
由一组 CSS 规范定义的伪类包括以下内容
A
B
:blank(输入) 实验性:blank(页面):buffering
C
:checked:current实验性
D
E
F
H
I
L
:lang():last-child:last-of-type:left:link:local-link实验性
M
N
O
P
R
S
T
U
V
W
规范
| 规范 |
|---|
| HTML # 伪类 |
| 选择器 Level 4 |
| CSS 作用域模块级别 1 |
| CSS 分页媒体模块第 3 级 |