伪类名 | 概述 |
:any-link | 🧪 有链接锚点的元素,会匹配每一个有 href 属性的 <a> <area> <link> |
:link | 匹配尚未被访问的链接 |
:visited | 匹配已访问的链接 |
:local-link | 匹配绝对 URL 与目标 URL 相同的链接,例如指向同一页面的锚链接。 |
:target | 代表一个唯一的页面元素(目标元素),其 id 与当前 URL 片段匹配 . |
:target-within | ⛔🧪 它表示一个本身由 :target 伪类匹配的元素, |
:scope | 表示作为选择器要匹配的参考点的元素。 |
伪类名 | 概述 |
:hover | 用户使用指示设备虚指[^虚指] 一个元素(没有激活它)的情况 |
:active | 匹配被用户激活的元素, |
:focus | 表示获得焦点的元素(如表单输入)。 |
:focus-visible | 当元素匹配:focus伪类并且客户端(UA)的启发式引擎决定焦点应当可见 |
:focus-within | 元素自身或者它的某个后代匹配 :focus 伪类。 |
伪类名 | 概述 |
:enabled | 表示任何被启用的(enabled)元素 |
:disabled | 任何被禁用的元素 ,和:enabled相反,不能够被激活或者获取焦点 |
:read-only | 元素处于不可被用户编辑的状态(只读), |
: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> |
伪类名 | 概述 |
:root | 表示作为文档根元素的元素。在 HTML 中,这通常是元素。<html> |
:empty | 匹配没有子元素的元素 |
:nth-child(an+b) | 先找到当前元素的全部兄弟元素,然后按位置先后顺序中1开始排序 |
: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)至少匹配一个元素。 |
:host | 选择包含其内部使用的 CSS 的 shadow DOM 的根元素 |
:host() | 🧪选择包含当前shadow Dom且选择器与参数相匹配的元素 |
:host-context() | 🧪选择showdow dom 中的子元素 |
:is() | 🧪匹配符合一组选择器中某个选择器的元素 |
:where() | 🧪匹配符合一组选择器中某个选择器的元素 |
:not() | 匹配不符合一组选择器的元素,又称反选伪类 |
伪类名 | 概述 |
:defined | 表示任何已定义的元素。 |
:fullscreen | 🧪 fullscreen应用于当前处于全屏显示模式的元素。 |
:picture-in-picture | 匹配画中画模式 |
:state() | 🧪 匹配元素内部状态处于指定状态的自定义元素 |