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 元素处于不可被用户编辑的状态(只读),
不仅仅是input其他div之类也算
: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"}

by 崮生 from 崮生 • 一些随笔 🎨,欢迎 赞助本文
本文欢迎分享与聚合,全文转载未经授权( 联系我)不许可。