选择器

一、CSS 选择器速查表

基础选择器

名称	选择器	描述	支持情况
通配选择器	`*`	选择所有元素	✅
元素选择器	`element`	选择所有指定元素（如 `div`, `p`）	✅
ID选择器	`#id`	选择具有指定 `id` 的元素	✅
类选择器	`.class`	选择具有指定 `class` 的元素	✅
组合类选择器	`element.class`	特定类型且具有指定 class 的元素	✅
分组选择器	`element1, element2`	选择多个元素（并集）	✅

组合选择器

名称	选择器	描述	支持情况
后代选择器	`A B`	选择 A 内所有 B	✅
子元素选择器	`A > B`	选择 A 的直接子元素 B	✅
相邻兄弟选择器	`A + B`	选择紧跟在 A 后的 B	✅
普通兄弟选择器	`A ~ B`	选择 A 后的所有同级 B	✅

属性选择器

名称	选择器	描述	支持情况
存在属性选择器	`[attr]`	选择包含该属性的元素	✅
属性等于	`[attr="value"]`	属性值等于指定值	✅
属性包含某词	`[attr~="value"]`	属性值中包含空格分隔的某值	✅
属性以值开头（连字符）	`[attr\|="value"]`	属性是以 `value` 开头的连字符值	✅
属性前缀匹配	`[attr^="value"]`	属性值以指定值开头	✅
属性后缀匹配	`[attr$="value"]`	属性值以指定值结尾	✅
属性包含值	`[attr*="value"]`	属性值中包含指定值	✅

伪类选择器

名称	选择器	描述	支持情况
鼠标悬停	`:hover`	鼠标悬停时触发	❌
激活状态	`:active`	鼠标点击激活状态	❌
获得焦点	`:focus`	元素获得焦点	✅
第一个子元素	`:first-child`	父元素的第一个子元素	✅
最后一个子元素	`:last-child`	父元素的最后一个子元素	✅
第 n 个子元素	`:nth-child(n)`	父元素中第 n 个子元素	❌
第 n 个类型子元素	`:nth-of-type(n)`	类型匹配的第 n 个子元素	❌
否定选择器	`:not(selector)`	排除选择器	✅
勾选状态	`:checked`	勾选的表单元素（checkbox, radio）	❌
禁用 / 启用	`:disabled` / `:enabled`	控件禁用或启用状态	❌

伪元素选择器

名称	选择器	描述	支持情况
内容前插入	`::before`	元素内容前插入	❌
内容后插入	`::after`	元素内容后插入	❌
首行样式	`::first-line`	段落首行样式	❌
首字母样式	`::first-letter`	首字母样式	❌
文本选中样式	`::selection`	文本被选中时的样式	❌

二、CSS 选择器优先级速查表

选择器示例	选择器类型	优先级（Specificity）	描述
`#id`	ID	0,1,0,0	ID 选择器，优先级高
`.class`, `[attr]`, `:hover`	Class/属性/伪类	0,0,1,0	类选择器、属性选择器、伪类等
`div`, `h1`, `p`, `:before`	元素/伪元素	0,0,0,1	元素选择器和伪元素
`*`	通配选择器	0,0,0,0	权重最低
`#id .class`	混合选择器	0,1,1,0	ID + 类选择器组合
`div .class span`	后代组合	0,0,1,2	类选择器和两个元素选择器
`ul li.active a:hover`	混合复杂选择器	0,0,2,3	多个类和伪类、元素组合
`style=""`	内联样式	1,0,0,0	写在 HTML 标签内的样式，优先级比选择器更高
`!important`	强制声明	-	不属于 specificity，但会覆盖所有非重要规则

简单规则说明

优先级格式：a,b,c,d
a：是否为内联样式（只有 style="" 是）
b：ID 选择器数量
c：类、属性选择器、伪类数量
d：元素、伪元素数量