所有CSS选择器
以下是前端开发中所有CSS选择器的系统性分类整理，包含定义、语法、示例及使用场景对比，助你全面掌握：
一、基础选择器
| 类型 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 元素 | element | p { color: red; } | 选择所有 <p> 元素 |
| 类 | .class | .active { background: yellow; } | 选择 class="active" 的元素 |
| ID | #id | #header { height: 80px; } | 选择 id="header" 的元素 |
| 通配 | * | * { margin: 0; } | 选择所有元素 |
二、组合选择器
| 类型 | 语法 | 示例 | 关系说明 |
|---|---|---|---|
| 后代 | A B | div p { font-size: 16px; } | B是A的任意后代 |
| 子元素 | A > B | ul > li { list-style: none; } | B是A的直接子元素 |
| 相邻兄弟 | A + B | h2 + p { margin-top: 0; } | B是紧接在A后的同级元素 |
| 通用兄弟 | A ~ B | h2 ~ p { color: gray; } | B是A后面的所有同级元素 |