# 分类
在讲解选择器的奇妙用处前，还是先把选择器分类记忆吧。没错，笔者就是喜欢总结。由于选择器的标准概念上无作出明确的分类，以下的分类是为了方便记忆而整理的。
基础选择器
| 选择器 | 别名 | 说明 | 版本 |
|---|---|---|---|
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 |
条件选择器
| 选择器 | 说明 | 版本 |
|---|---|---|
:lang |
指定标记语言的元素 | 2 |
:dir() |
指定编写方向的元素 | 4 |
:has |
包含指定元素的元素 | 4 |
:is |
指定条件的元素 | 4 |
:not |
非指定条件的元素 | 4 |
:where |
指定条件的元素 | 4 |
:scope |
指定元素作为参考点 | 4 |
:any-link |
所有包含href的链接元素 | 4 |
:local-link |
所有包含href且属于绝对地址的链接元素 | 4 |
行为选择器
| 选择器 | 说明 | 版本 |
|---|---|---|
:active |
鼠标激活的元素 | 1 |
:hover |
鼠标悬浮的元素 | 1 |
::selection |
鼠标选中的元素 | 3 |
状态选择器
| 选择器 | 说明 | 版本 |
|---|---|---|
:target |
当前锚点的元素 | 3 |
:link |
未访问的链接元素 | 1 |
:visited |
已访问的链接元素 | 1 |
:focus |
输入聚焦的表单元素 | 2 |
:required |
输入必填的表单元素 | 3 |
:valid |
输入合法的表单元素 | 3 |
:invalid |
输入非法的表单元素 | 3 |
:in-range |
输入范围以内的表单元素 | 3 |
:out-of-range |
输入范围以外的表单元素 | 3 |
:checked |
选项选中的表单元素 | 3 |
:optional |
选项可选的表单元素 | 3 |
:enabled |
事件启用的表单元素 | 3 |
:disabled |
事件禁用的表单元素 | 3 |
:read-only |
只读的表单元素 | 3 |
:read-write |
可读可写的表单元素 | 3 |
:target-within |
内部锚点元素处于激活状态的元素 | 4 |
:focus-within |
内部表单元素处于聚焦状态的元素 | 4 |
:focus-visible |
输入聚焦的表单元素 | 4 |
:blank |
输入为空的表单元素 | 4 |
:user-invalid |
输入合法的表单元素 | 4 |
:indeterminate |
选项未定的表单元素 | 4 |
:placeholder-shown |
占位显示的表单元素 | 4 |
:current() |
浏览中的元素 | 4 |
:past() |
已浏览的元素 | 4 |
:future() |
未浏览的元素 | 4 |
:playing |
开始播放的媒体元素 | 4 |
:paused |
暂停播放的媒体元素 | 4 |
结构选择器
| 选择器 | 说明 | 版本 |
|---|---|---|
:root |
文档的根元素 | 3 |
:empty |
无子元素的元素 | 3 |
:first-letter |
元素的首字母 | 1 |
      |