伪类

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特定状态。例如，:hover 伪类可用于在用户指针悬停在按钮上时选择该按钮，然后对选定的按钮进行样式设计。

css

/* 用户的指针悬停在其上的任何按钮 */
button:hover {
  color: blue;
}

伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数（例如，:dir()）。伪类所依附的元素被定义为锚元素（例如，button:hover 中的 button）。

通过伪类，不仅可以根据文档树的内容对元素应用样式，还可以根据导航器的历史记录等外部因素（如 :visited）、与其内容的状态（如某些表单元素上的 :checked）或鼠标位置（如 :hover，它可以让你知道鼠标是否在一个元素上）应用样式。

备注： 相较于伪类，伪元素可用于设置元素特定部分的样式。

元素伪类

这些伪类与元素的核心标识有关。

:defined: 匹配任何具有定义的元素。

元素显示状态伪类

这些伪类可以基于元素的显示状态来选择它们。

:open: 匹配可具有打开和关闭状态的元素，当前为打开状态。
:popover-open: 匹配当前处于显示状态的弹出窗口元素。
:modal: 匹配一个处于某种状态的元素，在这种状态下，该元素排除了与外部元素的所有交互，直到交互被解除。
:fullscreen: 匹配当前处于全屏模式的元素。
:picture-in-picture: 匹配当前处于画中画模式的元素。

输入状态伪类

这些伪类与表单元素相关，可以基于 HTML 属性或交互前后字段的状态来选择元素。

:enabled: 匹配处于启用状态的用户界面元素。
:disabled: 匹配处于禁用状态的用户界面元素。
:read-only: 匹配任何不能被用户更改的元素。
:read-write: 匹配任何用户可编辑的元素。
:placeholder-shown: 匹配显示占位符文本的输入元素。例如，它将匹配 <input> 和 <textarea> 元素中的 placeholder 属性。
:autofill: 匹配已被浏览器自动填充的 <input> 元素。
:default: 匹配一组元素中的一个或多个默认用户界面元素。
:checked: 匹配选中的复选框和单选钮等元素。
:indeterminate: 匹配处于不确定状态的用户界面元素。
:blank: 匹配空用户输入元素，包含空字符串或其他空输入。
:valid: 匹配具有有效内容的元素。例如，类型为“email”的输入元素，其中包含一个有效的电子邮件地址，或者如果控件不是必需的，则匹配一个空值。
:invalid: 匹配具有无效内容的元素。例如，类型为“email”的输入元素，其中没有输入一个有效的电子邮件地址。
:in-range: 适用于有范围限制的元素。例如，当所选值在允许范围内时的滑块控件。
:out-of-range: 适用于有范围限制的元素。例如，当所选值超出允许范围之外时的滑块控件。
:required: 匹配必须填入的表单元素。
:optional: 匹配可选填入的表单元素。
:user-valid: 代表具有正确输入的元素，但仅限于用户与之交互时。
:user-invalid: 代表具有错误输入的元素，但仅限于用户与之交互时。

语言伪类

这些伪类反映了文档语言，可根据语言或脚本方向选择元素。

:dir(): 方向性伪类根据文档语言确定的元素方向性来选择元素。
:lang(): 基于其内容语言来选择元素。

位置伪类

这些伪类与链接以及当前文档中的目标元素有关。

:any-link: 如果元素匹配 :link 或 :visited 则匹配该元素。
:link: 匹配还没有访问的链接。
:visited: 匹配已访问过的链接。
:local-link: 匹配绝对 URL 与目标 URL 相同的链接。例如，指向同一页面的锚链接。
:target: 匹配文档 URL 目标元素。
:target-within: 匹配文档 URL 的目标元素，也匹配有文档 URL 目标后代的元素。
:scope: 代表作为选择器匹配参考点的元素。

资源状态伪类

这些伪类应用于能够处于被描述为“正在播放”状态的媒体，例如视频。

:playing: 代表正在播放的可播放元素。
:paused: 代表已暂停的可播放元素。
:seeking: 代表当前正在媒体资源中寻找播放位置的可播放元素。
:buffering: 代表正在播放但由于正在下载媒体资源而暂时停滞的可播放元素。
:stalled: 代表正在播放但因无法下载媒体资源而停滞的可播放元素。
:muted: 代表已静音的可发声元素。
:volume-locked: 代表其音量级别被浏览器锁定的可发声元素。

时间维度伪类

这些伪类适用于查看有计时功能的东西，如 WebVTT 字幕轨。

:current: 代表正在显示的元素或元素的祖先。
:past: 代表完全出现在 :current 元素之前的元素。
:future: 代表完全出现在 :current 元素之后的元素。

树结构伪类

这些伪类与文档树中的元素位置有关。

:root: 代表文档的根元素。在 HTML 中，它通常是 <html> 元素。
:empty: 代表除空格字符外没有其他子元素的元素。
:nth-child(): 使用 An+B 表记从同级元素列表中选择元素。
:nth-last-child(): 使用 An+B 表记从同级元素列表中选择元素，从列表末尾开始计数。
:first-child: 匹配同级元素中的第一个元素。
:last-child: 匹配同级元素中的最后一个元素。
:only-child: 匹配没有同级元素的元素。例如，该列表中没有其他列表项的列表项。
:nth-of-type(): 使用 An+B 表记从同级元素列表中选择符合特定类型的元素。
:nth-last-of-type(): 使用 An+B 表记从同级元素列表中选择符合特定类型的元素，从列表末尾开始计数。
:first-of-type: 匹配同级元素中的第一个元素，同时匹配特定的类型选择器。
:last-of-type: 匹配同级元素中的最后一个元素，同时匹配特定的类型选择器。
:only-of-type: 匹配没有所选类型选择器同级元素的元素。

影子结构伪类

这些伪类与影子 DOM 有关。

:host: 匹配影子树的影子根。
:host(): 匹配与 :host 匹配并与所提供列表中任意选择器匹配的元素。
:host-context(): 在影子宿主的上下文中选择影子树以外的元素。
:has-slotted: 匹配已分配内容的插槽元素。

用户行为伪类

这些伪类需要用户进行一些交互才能够应用，例如将鼠标指针悬停在元素上。

:hover: 当用户使用指向设备（如将鼠标指针放在项目上）指定项目时匹配。
:active: 当用户激活项目时匹配。如点击项目时。
:focus: 当元素具有焦点时匹配。
:focus-visible: 当元素具有焦点且用户代理确定该元素应被明显聚焦时匹配。
:focus-within: 匹配 :focus 适用的元素，以及 :focus 适用的后代元素。
:target-current: 匹配当前滚动到的 ::scroll-marker 的 scroll-marker-group 伪元素，换句话说，就是活动的滚动标记。

函数式伪类

这些伪类接受选择器列表或可容错选择器列表作为参数。

:is(): 匹配与提供的列表中的任何选择器匹配的任何元素。
:not(): 表示其参数中未表示的任何元素。
:where(): 优先级调整伪类匹配与提供的列表中的任何选择器匹配的任何元素，但不添加任何优先级权重。
:has(): 该关系伪类表示与任何一个与锚定的元素的相对选择器相匹配（如果有的话）的元素。

自定义状态伪类

这些伪类应用于自定义元素。

:state(): 匹配具有指定自定义状态的自定义元素。

页面伪类

这些伪类与打印文档中的页面有关，与 At 规则 @page 一起使用。

:left: 代表打印文档的所有左侧页面。
:right: 代表打印文档的所有右侧页面。
:first: 代表打印文档的第一页。
:blank: 代表打印文档的空页。

语法

css

selector:pseudo-class {
  property: value;
}

像常规的类一样，你可以在选择器中将任意数量的伪类链接在一起。

字母索引

由一组 CSS 规范定义的伪类包括以下内容：

:blank（输入）实验性
:blank（页面）
:buffering

:checked
:current 实验性

:where()

规范

Specification
HTML # pseudo-classes
Selectors Level 4
CSS Scoping Module Level 1
CSS Paged Media Module Level 3

参见

伪元素