本文原出处于掘金,原作者：JowayYoung

基础选择器

选择器 别名 说明 版本 常用
tag 标签选择器 指定类型的标签 1 √
#id ID 选择器 指定身份的标签 1 √
.class 类选择器 指定类名的标签 1 √
* 通配选择器 所有类型的标签 2 √

层次选择器

选择器 别名 说明 版本 常用
elemP elemC 后代选择器 元素的后代元素 1 √
elemP>elemC 子代选择器 元素的子代元素 2 √
elem1+elem2 相邻同胞选择器 元素相邻的同胞元素 2 √
elem1~elem2 通用同胞选择器 元素后面的同胞元素 3 √

集合选择器

选择器 别名 说明 版本 常用
elem1,elem2 并集选择器 多个指定的元素 1 √
elem.class 交集选择器 指定类名的元素 1 √

条件选择器

选择器 说明 版本 常用
:has 包含指定元素的元素 4 ×
:is 指定条件的元素 4 ×
:not 非指定条件的元素 4 √

状态选择器

选择器 说明 版本 常用
:active 鼠标激活的元素 1 ×
:hover 鼠标悬浮的元素 1 √
:link 未访问的链接元素 1 ×
:visited 已访问的链接元素 1 ×
:target 当前锚点的元素 3 ×
:focus 输入聚焦的表单元素 2 √
:required 输入必填的表单元素 3 √
:checked 选项选中的表单元素 3 √
:disabled 事件禁用的表单元素 3 √
:read-only 只读的表单元素 3 ×
:focus-within 内部表单元素处于聚焦状态的元素 4 √
:blank 输入为空的表单元素 4 ×
:placeholder-shown 占位显示的表单元素 4 √
:playing 开始播放的媒体元素 4 ×
:paused 暂停播放的媒体元素 4 ×

结构选择器

选择器 说明 版本 常用
:root 文档的根元素 3 ×
:empty 无子元素的元素 3 √
:nth-child(n) 元素中指定顺序索引的元素 3 √
:first-child 元素中为首的元素 2 √
:last-child 元素中为尾的元素 3 √
:only-child 父元素仅有该元素的元素 3 √
:nth-of-type(n) 标签中指定顺序索引的标签 3 √
:first-of-type 标签中为首的标签 3 √
:last-of-type 标签中为尾标签 3 √
:only-of-type 父元素仅有该标签的标签 3 √

属性选择器

选择器 说明 版本 常用
[attr] 指定属性的元素 2 √
[attr=val] 属性等于指定值的元素 2 √
[attr*=val] 属性包含指定值的元素 3 √
[attr^=val] 属性以指定值开头的元素 3 √
[attr$=val] 属性以指定值结尾的元素 3 √

伪元素

选择器 说明 版本 常用
::before 在元素前插入的内容 2 √
::after 在元素后插入的内容 2 √
::first-letter 元素的首字母 1 ×
::first-line 元素的首行 1 ×
::selection 鼠标选中的元素 3 ×
::backdrop 全屏模式的元素 4 ×
::placeholder 表单元素的占位 4 √

选择器真正的用处不仅仅是说明选项里的描述，更多是搭配起来能起到的最大作用。这些选择器组成的选择器系统是整个 CSS 体系里的核心，使用选择器能带来以下好处。