CSS 伪类选择器速查表

💡

速查表

伪类选择器	语法	示例	示例说明
动态伪类	ㅤ	ㅤ	ㅤ
链接状态	`:link`	`a:link`	选择所有未被点击过的链接。
ㅤ	`:visited`	`a:visited`	选择所有已被点击过的链接。
ㅤ	`:hover`	`a:hover`	选择鼠标悬停在其上的链接。
ㅤ	`:active`	`a:active`	选择当前被激活的链接。
ㅤ	`:focus`	`input:focus`	选择当前获得焦点的输入框。
ㅤ	`:focus-within`	`div:focus-within`	选择自身或其后代获得焦点的元素。
ㅤ	`:focus-visible`	`button:focus-visible`	选择获得焦点且焦点可见的元素，主要用于键盘导航。
结构伪类	ㅤ	ㅤ	ㅤ
第一个子元素	`:first-child`	`p:first-child`	选择每个父元素中的第一个 `<p>` 元素。
最后一个子元素	`:last-child`	`p:last-child`	选择每个父元素中的最后一个 `<p>` 元素。
唯一子元素	`:only-child`	`p:only-child`	选择每个父元素中唯一的 `<p>` 元素。
第一个同类元素	`:first-of-type`	`p:first-of-type`	选择每个父元素中的第一个 `<p>` 类型的元素。
最后一个同类元素	`:last-of-type`	`p:last-of-type`	选择每个父元素中的最后一个 `<p>` 类型的元素。
唯一同类元素	`:only-of-type`	`p:only-of-type`	选择每个父元素中唯一的 `<p>` 类型的元素。
第 n 个子元素	`:nth-child(n)`	`p:nth-child(2)`	选择每个父元素中的第 2 个子元素，如果是 `<p>` 元素则选中。
倒数第 n 个子元素	`:nth-last-child(n)`	`p:nth-last-child(2)`	选择每个父元素中的倒数第 2 个子元素，如果是 `<p>` 元素则选中。
第 n 个同类元素	`:nth-of-type(n)`	`p:nth-of-type(2)`	选择每个父元素中的第 2 个 `<p>` 类型的元素。
倒数第 n 个同类元素	`:nth-last-of-type(n)`	`p:nth-last-of-type(2)`	选择每个父元素中的倒数第 2 个 `<p>` 类型的元素。
ㅤ	`:nth-child(odd)`	`p:nth-child(odd)`	选择每个父元素中的奇数位置的 `<p>` 元素。
ㅤ	`:nth-child(even)`	`p:nth-child(even)`	选择每个父元素中的偶数位置的 `<p>` 元素。
ㅤ	`:nth-child(2n+1)`	`p:nth-child(2n+1)`	选择每个父元素中的奇数位置的 `<p>` 元素。
ㅤ	`:nth-child(2n)`	`p:nth-child(2n)`	选择每个父元素中的偶数位置的 `<p>` 元素。
ㅤ	`:nth-child(3n+1)`	`p:nth-child(3n+1)`	选择每个父元素中的第 1、4、7... 个 `<p>` 元素。
ㅤ	`:nth-last-child(3n+1)`	`p:nth-last-child(3n+1)`	选择每个父元素中的倒数第 1、4、7... 个 `<p>` 元素。
ㅤ	`:nth-of-type(3n+1)`	`p:nth-of-type(3n+1)`	选择每个父元素中的第 1、4、7... 个 `<p>` 类型的元素。
ㅤ	`:nth-last-of-type(3n+1)`	`p:nth-last-of-type(3n+1)`	选择每个父元素中的倒数第 1、4、7... 个 `<p>` 类型的元素。
ㅤ	`:not(selector)`	`p:not(.intro)`	选择所有非 `class="intro"` 的 `<p>` 元素。
表单伪类	ㅤ	ㅤ	ㅤ
已选中的元素	`:checked`	`input:checked`	选择所有被选中的输入框（复选框、单选按钮）。
默认选中的元素	`:default`	`input:default`	选择所有默认选中的输入框（复选框、单选按钮）。
可用的元素	`:enabled`	`input:enabled`	选择所有可用的输入框。
不可用的元素	`:disabled`	`input:disabled`	选择所有不可用的输入框。
必填的元素	`:required`	`input:required`	选择所有必需的输入框。
可选的元素	`:optional`	`input:optional`	选择所有可选的输入框。
输入值合法的元素	`:valid`	`input:valid`	选择所有输入值合法的输入框。
输入值不合法的元素	`:invalid`	`input:invalid`	选择所有输入值不合法的输入框。
输入值在规定范围内的元素	`:in-range`	`input:in-range`	选择所有输入值在规定范围内的输入框。
输入值超出规定范围的元素	`:out-of-range`	`input:out-of-range`	选择所有输入值超出规定范围的输入框。
可读可写的元素	`:read-write`	`input:read-write`	选择所有可读可写的输入框。
只读的元素	`:read-only`	`input:read-only`	选择所有只读的输入框。
其他伪类	ㅤ	ㅤ	ㅤ
空元素	`:empty`	`p:empty`	选择没有子元素（包括文本）的 `<p>` 元素。
语言伪类	`:lang(language)`	`p:lang(it)`	选择 `lang` 属性以 `it` 开头的所有 `<p>` 元素。
被 URL 锚点指向的元素	`:target`	`#news:target`	选择当前被 URL 锚点指向的元素。
选择器组合	`:is`	`:is(div, p)`	选择所有 `<div>` 和 `<p>` 元素。
子选择器	`:has`	`:has(p)`	选择包含 `<p>` 元素的元素。

希望这个速查表能帮助您快速查找和理解各种CSS伪类选择器。

CSS 伪类选择器速查表

神秘人