CSS 选择器 伪类与伪元素汇总

以下内容改编自MDN文档。

伪类	描述
🖱 :active	用户按下左键时发生的样式，松开左键即完成
:any-link	链接的:link和:visited状态
:blank	空输入值的<input>元素
🌸 :checked	处于选中状态的单选或复选框
:current	正在展示的元素，或者其上级元素
:default	一组相似的元素中默认的一个或者更多的 UI 元素
:dir	基于其方向性（HTMLdir属性或者 CSSdirection属性的值）一个元素
🌸 :disabled	不可用UI元素
🐣 :empty	没有任何content的元素（甚至不能有空格）
🌸 :enabled	可用UI元素
:first	分页媒体的第一页
🐣 :first-child	兄弟元素中的第一个元素
🐣 :first-of-type	兄弟元素中第一个某种类型的元素
🖱 :focus	用于元素成为焦点时，常用在表单上
:focus-visible	当元素有焦点，且焦点对用户可见
:focus-within	有焦点的元素，以及子代元素有焦点的元素
:future	当前元素之后的元素
🖱 :hover	鼠标悬浮到一个元素之上时
:indeterminate	未定态值的 UI 元素，通常为复选框
:in-range	用一个区间元素，当值处于区间之内时
:invalid	诸如<input>的位于不可用状态的元素
:lang	基于语言（HTMLlang属性的值）元素
🐣 :last-child	兄弟元素中最后的那个元素
🐣 :last-of-type	兄弟元素中最后一个某种类型的元素
:left	在分页媒体 (en-US)中，左手边的页
🔗 :link	未曾访问的链接
:local-link	指向和当前文档同一网站页面的链接
:is()	传入的选择器列表中的任何选择器
🤷‍♂️ :not	不符合特定条件的元素（如input:not([type=”submit”]) 为非提交类型的input元素）
🐣 :nth-child	选定若干个特定兄弟元素
🐣 :nth-of-type	选定某类型的若干个特定兄弟元素
🐣 :nth-last-child	选定倒数若干个特定兄弟元素
🐣 :nth-last-of-type	选定某类型的倒数若干个特定兄弟元素
🐣 :only-child	没有兄弟元素的子元素
🐣 :only-of-type	兄弟元素中某类型仅有的元素
:optional	不是必填的 form 元素
:out-of-range	按区间元素，当值不在区间内的的时候
:past	当前元素之前的元素
:placeholder-shown	显示占位文字的 input 元素
:playing	代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素
:paused	代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素
:read-only	用户不可更改的元素
:read-write	用户可更改的元素
:required	必填的 form 元素
:right	在分页媒体 (en-US)中，右手边的页
:root	文档的根元素
:scope	任何为参考点元素的的元素
:valid	诸如<input>元素的处于可用状态的元素
🎯 :target	当前 URL 目标元素（网址中被指定了ID）
🔗 :visited	已访问的链接

* n从0开始步进，如3n + 1表示1, 4, 7…

伪元素	描述
::after	出现在原有元素的实际内容之后的一个可样式化元素
::before	出现在原有元素的实际内容之前的一个可样式化元素
::first-letter	元素的第一个字母
::first-line	包含此伪元素的元素的第一行
::grammar-error	文档中包含了浏览器标记的语法错误的那部分
::selection	文档中被选择的那部分
::spelling-error	文档中包含了浏览器标记的拼写错误的那部分