css伪类

MDN-伪类 CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

CSS 伪类索引

emoji 标识索引

🧪：实验中的功能，兼容性还不够好，而且将来可能会改变

⛔：目前基本没有浏览器兼容，不要期望短期内能用

引用链接（复制用）： 🧪 ⛔

语言伪类

这些伪类反映文档语言，并启用基于语言或脚本方向选择元素。

伪类名	概述
:dir()	🧪 匹配特定文字书写方向的元素
:lang()	基于元素语言来匹配页面元素。

位置伪类

这些伪类与链接和当前文档中的目标元素相关。

伪类名	概述
:any-link	🧪 有链接锚点的元素，会匹配每一个有 href 属性的 <a> <area> <link> 是:link 与:visited 的并集
:link	匹配尚未被访问的链接
:visited	匹配已访问的链接
:local-link	匹配绝对 URL 与目标 URL 相同的链接，例如指向同一页面的锚链接。
:target	代表一个唯一的页面元素(目标元素)，其 id 与当前 URL 片段匹配 .
:target-within	⛔🧪 它表示一个本身由 :target 伪类匹配的元素，或者具有一个由:target 匹配的后代元素。(这包括shadow trees中的后代。)
:scope	表示作为选择器要匹配的参考点的元素。目前在样式表中:scope等效于:root因为目前还没有方法来显式建立作用域但通过 js 的querySelector() 这类方法是可以使用的

用户操作伪类

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

伪类名	概述
:hover	用户使用指示设备虚指[^虚指] 一个元素（没有激活它）的情况
:active	匹配被用户激活的元素，当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
:focus	表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
:focus-visible	当元素匹配:focus伪类并且客户端(UA)的启发式引擎决定焦点应当可见
:focus-within	元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树中的后代也包括在内）

时间维伪类

这些伪类适用于查看具有计时功能的内容，例如 WebVTT 标题跟踪。

伪类名	概述
:current	当前正在显示的元素或元素的祖先。
:past	匹配任何完全出现在匹配:current 的元素之前的元素
:future	匹配任何完全出现在匹配:current 的元素之后的元素

资源状态伪类

伪类名	概述
:playing	🧪 匹配处于播放状态元素
:paused	🧪 匹配处于暂停状态元素

输入伪类

这些伪类与表单元素相关，并启用基于 HTML 属性以及字段在交互之前和之后的状态选择元素。

伪类名	概述
:enabled	表示任何被启用的（enabled）元素如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的
:disabled	任何被禁用的元素 ,和:enabled相反，不能够被激活或者获取焦点
:read-only	元素处于不可被用户编辑的状态（只读），不仅仅是其他div之类也算input
:read-write	表示元素不可被用户编辑的状态（如锁定的文本输入框），同上
:placeholder-shown	🧪匹配正在显示 placeholder text 的<input> <textarea>
:default	匹配一组相关元素中默认选中的那个表单元素
:checked	匹配任何处于选中状态的元素， radio checkbox option
:indeterminate	匹配处于不确定状态的表单元素
:blank	⛔🧪匹配输入为空的输入元素
:valid	匹配校验输入通过的表单元素
:invalid	匹配校验输入未通过的表单元素
:user-invalid	🧪匹配经过用户交互后仍然校验未通过的表单元素
:in-range	匹配一个指定了数值范围且值在该范围内的输入元素
:out-of-range	匹配一个指定了数值范围且值在该范围外的输入元素
:required	匹配设定了required属性的 <input> <select> <textarea>
:optional	匹配没有设定required属性的 <input> <select> <textarea>

树结构伪类

这些伪类与元素在dom树中的位置相关

伪类名	概述
:root	表示作为文档根元素的元素。在 HTML 中，这通常是元素。<html>
:empty	匹配没有子元素的元素
:nth-child(an+b)	先找到当前元素的全部兄弟元素，然后按位置先后顺序中1开始排序匹配其序号符合 an+b 规则的元素，例如2n+1 3 4n
:nth-last-child(an+b)	同上但序号分配是从后面开始的
:first-child	匹配当前元素的全部兄弟元素中最前面的那个元素
:last-child	匹配当前元素的全部兄弟元素中最后面的那个元素
:only-child	匹配没有兄弟元素的元素
:nth-of-type()	和 :nth-child类似但先排除兄弟元素中与此类型不同的元素再进行排序
:nth-last-of-type()	同上但序号分配是从后面开始的
:first-of-type	参考 :first-child 与 :nth-of-type()
:last-of-type	参考 :last-child 与 :nth-of-type()
:only-of-type	参考 :only-child 与 :nth-of-type()
:has()	🧪 代表一个元素，其给定的选择器参数（相对于该元素的 :scope）至少匹配一个元素。:has() 伪类接受一个选择器组作为参数。在当前规范中 :has 并未列为实时选择器配置的一部分，意味着其不能用于样式表中，只能用于如 document.querySelector() 的函数中。
:host	选择包含其内部使用的 CSS 的 shadow DOM 的根元素换句话说，这允许你从其 shadow DOM 中选择一个自定义元素。
:host()	🧪选择包含当前shadow Dom且选择器与参数相匹配的元素
:host-context()	🧪选择showdow dom 中的子元素
:is()	🧪匹配符合一组选择器中某个选择器的元素优先级由这组选择器中最高的选择器决定
:where()	🧪匹配符合一组选择器中某个选择器的元素和is()的区别在于此选择器的优先级是0
:not()	匹配不符合一组选择器的元素，又称反选伪类

打印伪类

这些伪类用来控制打印文档时候的样式

伪类名	概述
:first	打印文档的时候，第一页的样式。
:left	对打印文档的左侧页设置 CSS 样式.
:right	对打印文档的右侧页设置 CSS 样式.

其他

这些伪类难以分类

伪类名	概述
:defined	表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素 (例如通过 CustomElementRegistry.define() 方法)
:fullscreen	🧪 fullscreen应用于当前处于全屏显示模式的元素。它不仅仅选择顶级元素，还包括所有已显示的栈内元素。
:picture-in-picture	匹配画中画模式
:state()	🧪 匹配元素内部状态处于指定状态的自定义元素

[^虚指]: 使用指示设备（例如鼠标）控制光标移动到某个元素上{: id="20210105144353-2zelhy7"}