伪类
一个 CSS 伪类 是添加到选择器中的一个关键字，它指定所选元素的特殊状态。例如，伪类 :hover 可以用于在用户指针悬停在按钮上时选择按钮，然后可以对这个选中的按钮进行样式设置。
/* Any button over which the user's pointer is hovering */
button:hover {
color: blue;
}
伪类由一个冒号 (:) 后跟伪类名称（例如，:hover）组成。函数式伪类还包含一对括号来定义参数（例如，:dir()）。伪类附加到的元素被称为锚元素（例如，在 button:hover 的情况下，为 button）。
伪类允许你不仅根据文档树的内容，而且还根据外部因素（如导航器的历史记录（例如，:visited）、其内容的状态（如某些表单元素的 :checked）或鼠标的位置（如 :hover，它可以让你知道鼠标是否悬停在某个元素上）来应用元素样式。
注意：与伪类相反，伪元素 可以用于设置元素的特定部分的样式。
元素显示状态伪类
这些伪类可以根据元素的显示状态选择元素。
:fullscreen-
匹配当前处于全屏模式的元素。
:modal-
匹配处于某种状态的元素，在这种状态下，它会排除所有与外部元素的交互，直到交互被解除。
:picture-in-picture-
匹配当前处于画中画模式的元素。
输入伪类
这些伪类与表单元素相关，并允许根据 HTML 属性以及字段在交互前后所处的状态来选择元素。
:autofill-
当
<input>被浏览器自动填充时匹配。 :enabled-
表示处于启用状态的用户界面元素。
:disabled-
表示处于禁用状态的用户界面元素。
:read-only-
表示任何不能被用户更改的元素。
:read-write-
表示任何可由用户编辑的元素。
:placeholder-shown-
匹配显示占位符文本的输入元素。例如，它将匹配
<input>和<textarea>元素中的placeholder属性。 :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-
匹配已访问的链接。
:local-link-
匹配其绝对 URL 与目标 URL 相同的链接。例如，指向同一页面的锚点链接。
:target-
匹配作为文档 URL 目标的元素。
:target-within-
匹配作为文档 URL 目标的元素，以及具有作为文档 URL 目标的后代的元素。
:scope-
表示作为选择器匹配参考点的元素。
资源状态伪类
时间维度伪类
树结构伪类
这些伪类与元素在文档树中的位置相关。
: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-
匹配没有选定类型选择器同级元素的元素。
用户操作伪类
这些伪类需要用户进行一些交互才能应用，例如将鼠标指针悬停在元素上。
:hover-
当用户使用指向设备（例如将鼠标指针悬停在项目上）指定项目时匹配。
:active-
当用户激活项目时匹配。例如，当点击项目时。
:focus-
当元素获得焦点时匹配。
:focus-visible-
当元素获得焦点且用户代理识别该元素应该可见地获得焦点时匹配。
:focus-within
功能性伪类
语法
selector:pseudo-class {
property: value;
}
与普通类一样，您可以在选择器中链接任意多个伪类。
字母索引
规范
| 规范 |
|---|
| HTML 标准 # 伪类 |
| 选择器级别 4 |
| CSS 基本用户界面模块级别 4 |