# CSS3核心特性-第7章-7.1-基础选择器与组合选择器
## 学习目标
- 掌握CSS基础选择器（元素、类、ID选择器）的语法与使用场景
- 理解组合选择器（后代、子元素、相邻兄弟等）的匹配规则
- 能够通过选择器组合实现复杂元素定位
- 区分不同选择器的优先级与性能影响
## 概念讲解
CSS选择器是用于定位HTML元素并应用样式的模式。**基础选择器**通过元素类型、类名或ID直接匹配元素，**组合选择器**则通过元素间的关系（如父子、兄弟关系）进行匹配，两者结合可实现精准的样式定位。
选择器的核心价值在于：
- **分离结构与样式**：HTML专注内容结构，CSS通过选择器控制样式
- **代码复用**：一个选择器可匹配多个元素，避免样式重复定义
- **精准控制**：通过组合规则定位特定场景的元素（如"表格中最后一行的偶数单元格"）
## 语法参考
### 一、基础选择器
| 选择器类型 | 语法格式 | 描述 | 示例 |
| -------------- | ------------ | ------------------------ | ------------------------------------------------------------ |
| **元素选择器** | `element` | 匹配所有指定类型的元素 | `p { color: #333; }`（匹配所有`
`标签） |
| **类选择器** | `.classname` | 匹配所有包含指定类的元素 | `.btn { padding: 8px 16px; }`（匹配`class="btn"`的元素） |
| **ID选择器** | `#idname` | 匹配唯一具有指定ID的元素 | `#header { height: 60px; }`（匹配`id="header"`的元素） |
| **通配选择器** | `*` | 匹配所有元素（谨慎使用） | `* { margin: 0; padding: 0; }`（重置所有元素的外边距和内边距） |
> **注意**：ID选择器具有唯一性，一个文档中不应出现重复ID；类选择器可重复使用，一个元素可同时拥有多个类（空格分隔）。
### 二、组合选择器
| 组合类型 | 语法格式 | 描述 | 示例 |
| ------------------ | --------- | ------------------------------------------------ | ------------------------------------------------------------ |
| **后代选择器** | `A B` | 匹配A元素内的**所有后代B元素**（包括子、孙辈等） | `ul li { list-style: none; }`（匹配`
`内所有`- `） |
| **子元素选择器** | `A > B` | 仅匹配A元素的**直接子元素B**（不包含孙辈） | `nav > ul { margin: 0; }`（仅匹配`
