📐 CSS选择器速查表
标签、类、ID、属性、伪类、伪元素选择器对照。支持搜索。
基础选择器
| 选择器 | 说明 | 示例 |
|---|---|---|
| * | 通配符，匹配所有元素 | * { margin:0; } |
| div | 标签选择器 | div { color:red; } |
| .class | 类选择器 | .box { padding:10px; } |
| #id | ID选择器 | #header { height:60px; } |
| A, B | 分组选择器 | h1, h2, h3 { font-size:20px; } |
组合选择器
| 选择器 | 说明 | 示例 |
|---|---|---|
| A B | 后代选择器（A内的所有B） | div p { } |
| A > B | 子代选择器（A的直接子元素B） | ul > li { } |
| A + B | 相邻兄弟（A后紧邻的第一个B） | h1 + p { } |
| A ~ B | 通用兄弟（A后所有同级B） | h1 ~ p { } |
属性选择器
| 选择器 | 说明 |
|---|---|
| [attr] | 有attr属性的元素 |
| [attr=val] | attr属性等于val |
| [attr^=val] | attr以val开头 |
| [attr$=val] | attr以val结尾 |
| [attr*=val] | attr包含val |
伪类
| 选择器 | 说明 |
|---|---|
| :hover | 鼠标悬停 |
| :focus | 获取焦点 |
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(n) | 第n个子元素 |
| :not(selector) | 不匹配selector的元素 |
| :checked | 选中的input |
| :disabled | 禁用的元素 |
伪元素
| 选择器 | 说明 |
|---|---|
| ::before | 元素内容前插入 |
| ::after | 元素内容后插入 |
| ::first-line | 第一行 |
| ::first-letter | 第一个字符 |
| ::placeholder | 输入框占位符 |
| ::selection | 选中的文本 |
CSS选择器优先级
优先级从高到低：!important > 内联样式(style) > ID选择器(#id) > 类选择器(.class) > 标签选择器(div) > 通配符(*)。相同优先级时后面的覆盖前面的。
