2. 选择器与优先级
这是什么：选择器 = CSS 规则里「写给谁」的那部分，如 p、.tip、#main，决定样式落在哪些元素上。
为什么用：上一章知道了规则的写法，这一章解决「规则写给谁」的问题——没有选择器，规则就不知道该给谁看。
如何用：先认清 5 种基本选择器，再写一条 p { font-size: 16px; } 看它命中了页面上哪些元素。
2.1 基本选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 标签选择器 | p |
选中所有该标签的元素 |
| 类选择器 | .box |
选中 class="box" 的元素 |
| ID 选择器 | #main |
选中 id="main" 的元素（页面唯一） |
| 通配符选择器 | * |
选中所有元素 |
| 属性选择器 | [type="text"] |
选中拥有该属性值的元素 |
示例：
<p>段落一</p>
<p class="tip">这是提示</p>
<div id="main">主区块</div>
p { font-size: 16px; } /* 两段都会命中 */
.tip { color: orange; } /* 类可以复用 */
#main { background: #eee; }/* id 全页唯一 */
你会看到：段落一是普通样式，段落二是橙色，主区块有了浅灰底。
2.2 复合选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 后代选择器 | nav a |
nav 里面所有的 a（不管多深） |
| 子选择器 | nav > a |
只选 nav 的直接 a 子元素 |
| 相邻兄弟 | h2 + p |
紧跟在 h2 后面的那个 p |
| 交集选择器 | p.tip |
既是 p 又有 tip 类 |
| 并集选择器 | h1, h2, p |
逗号隔开，同时命中多组 |
类选择器是日常使用频率最高的：给元素起名，再按名设置样式，比标签选择器精准得多。
2.3 伪类与伪元素
- 伪类描述「状态」，冒号开头：
:hover（悬停）、:first-child（第一个孩子）、:focus（聚焦中） - 伪元素描述「某个部分」，双冒号开头：
::before、::after（可插入装饰内容）
a:hover { color: red; } /* 鼠标悬停变红 */
li:first-child { font-weight: bold; }/* 列表第一条加粗 */
2.4 优先级（谁说了算）
当多条规则冲突时，CSS 按权重打分：
| 排序 | 选择器 | 权重 |
|---|---|---|
| 1 | 行内样式 style="" |
最高 |
| 2 | ID 选择器 #main |
高 |
| 3 | 类 / 伪类 / 属性选择器 .box |
中 |
| 4 | 标签 / 伪元素选择器 p |
低 |
| 5 | 通配符 * |
最低 |
三条规则记牢：
- 权重高的覆盖权重低的
- 权重相同，后写的赢
- 特殊值
!important一票否决（尽量别用，会毁了维护性）
p { color: gray; } /* 低：标签 */
.news p { color: black; } /* 中：类+标签 */
#top p { color: blue; } /* 高：标签+id → 赢 */
你会看到：同时被三条规则命中的段落最终是蓝色。
记忆口诀：行内 > id > 类 > 标签 > 通配，同级比谁后写。
2.5 动手改
- 给标题加
:hover，悬停时变色 - 把一段文字同时加上类和 id 样式，观察 id 赢
- 在
#top p后再写一个与它同权的规则改颜色，验证「后写>先写」
2.6 小结
- 日常按「类选择器为主、标签选择器打底、id 少用」组织 CSS
- 复合选择器用「空格 / > / +」表达层级关系
- 冲突时按行内 > id > 类 > 标签判定，同级后写赢
下一章：颜色与文本样式 🐸