0.1 什么是选择器
- 1.1.1 定义：
选择器用于选中HTML中的元素，从而给它们设置样式。 - 1.1.2 核心结构
选择器 {
属性: 值;
}
👉 本质理解：
选择器 = 你要操作的目标
0.2 选择器分类总览
- 1.2.1 基础选择器
- 标签选择器
- 类选择器
- id选择器
- 1.2.2 组合选择器
- 交集选择器
- 并集选择器
- 1.2.3 结构选择器
- 子代选择器
- 后代选择器
- 1.2.4 特殊选择器
- 通配符选择器
1 基础选择器（核心）
1.1 标签选择器（村长）
- 2.1.1 写法
div {
color: red;
}
- 2.1.2 特点
- 选中所有同类标签
- 简单但不灵活
- 2.1.3 缺点
- ❌ 无法区分不同元素
1.2 类选择器（镇长）
- 2.2.1 写法
.box1 {
background-color: red;
}
- 2.2.2 特点
- 可复用（重点！）
- 一个元素可以多个class
- 2.2.3 权重
- 高于标签选择器
1.3 id选择器（县长）
- 2.3.1 写法
box1 {
background-color: blue;
}
- 2.3.2 特点
- 页面中唯一
- 精确定位
- 2.3.3 注意
- ❌ 不能重复使用
2 组合选择器
2.1 交集选择器
- 3.1.1 写法
div.box1 {
color: red;
}
- 3.1.2 含义
👉 同时满足：- 是div
- class是box1
2.2 并集选择器
- 3.2.1 写法
div, span, p {
color: red;
}
- 3.2.2 含义
👉 同时选中多个元素
3 结构选择器（重点）
3.1 子代选择器
- 4.1.1 写法
div > ul > li {
color: red;
}
- 4.1.2 含义
👉 只选直接子元素
3.2 后代选择器
- 4.2.1 写法
div li {
color: blue;
}
- 4.2.2 含义
👉 选中所有后代（不限层级）
3.3 子代 vs 后代（必考）
- 子代（>）
- 只找“儿子”
- 后代（空格）
- 找“所有子孙”
4 通配符选择器
4.1 写法
- {
color: red;
}
4.2 特点
- 选中所有元素
- 优先级最低
4.3 注意
- ❌ 性能差（不推荐大量使用）
- ✅ 常用于初始化样式
5 选择器优先级（重点中的重点）
5.1 权重等级（从低到高）
*（通配符） < 标签 < 类 < id
👉 记忆法（你这个很适合）：
- 村民：*
- 村长：标签
- 镇长：class
- 县长：id
5.2 同级规则
- 后写的生效（就近原则）
div {
color: red;
}
div {
color: blue;
}
👉 最终：蓝色
5.3 多选择器同时作用
- 谁权重高 → 谁生效
div {
color: red;
}
.box1 {
color: blue;
}
👉 最终：蓝色（class赢）
6 常见组合技巧（实战）
6.1 多类叠加
👉 一个元素可以拥有多个样式
6.2 精准控制
ul li {
color: red;
}
👉 控制列表内部元素
6.3 推荐写法
- 多用 class
- 少用 id（除非唯一标识）
7 本章核心总结（必须掌握）
7.1 核心能力
你必须能做到：
- 看代码能说出选择器含义
- 自己写出各种选择器
- 判断谁生效（优先级）
7.2 高频考点
- 子代 vs 后代
- 优先级规则
- class 和 id 区别
- 并集 vs 交集
7.3 一句话总结
👉 选择器 = 控制“谁被修改”
8 进阶理解（拉开差距）
8.1 为什么企业大量用 class
- 可复用
- 可组合
- 可维护
8.2 为什么少用 id
- 不可复用
- 容易造成样式冲突
- 更适合JS定位
8.3 真正核心
👉 CSS本质就两件事：
- 选中谁（选择器）
- 改成什么样（属性）