现在才给页面「化妆」。本单元对应教材单元四（10 学时）：样式规则与三种引入方式、样式优先级；基本选择器（标记 / 类 / id / 通配符）与复合选择器（交集 / 并集 / 后代）；链接伪类与样式面板；表格样式。 CSS 的最大坑是「优先级」——同样是红色，谁赢？本单元讲透它。
style="color:red" 写在标签上——最具体、优先级最高，但难维护，仅调试用。<style> 写在 <head>——单页够用，本课程小例子常用。<link rel="stylesheet" href="x.css">——多页共享，生产首选。行内样式像「贴在你身上的即时贴」（最强）；id 像身份证号（唯一、权重高）；class 像工牌（一类人通用）；标记像「人类」这种大类（最弱）。同一属性多人管，按 id > class > 标记，同级看谁后写。
| 选择器 | 写法 | 权重感 |
|---|---|---|
| 标记 | p { } | 低 |
| 类 | .card { } | 中 |
| id | #top { } | 高 |
| 交集（复合） | p.hl { } | 叠加 |
| 并集（复合） | h1, h2 { } | 各自独立 |
| 后代（复合） | nav a { } | 叠加 |
| 通配符 | * { } | 最低 |
| 伪类 | a:hover { } | 类级 |
基本选择器只能「点一类人」，实际写样式时往往还要再加条件。把两个及以上选择器拼起来用的写法，教材统称 复合选择器；最常用的三种全靠连接符号区分——符号换一个，命中的元素就完全不同。
| 名称 | 连接符号 | 写法 | 含义 | 命中范围 |
|---|---|---|---|---|
| 交集选择器 | 直接连写，无空格 | p.hl | 同时满足全部条件才命中 | 更小：条件越多越精确 |
| 并集选择器 | 英文逗号 , | h1, h2, h3 | 任意一个命中即可，也叫分组选择器 | 更大：几组元素合并 |
| 后代选择器 | 空格 | nav a | 前者内部的元素，不限层级 | 按层级限定范围 |
<style>
/* ① 交集：连写、中间没有空格 —— 既是 p、又带 hl 才命中 */
p.hl { color:#A8451F; font-weight:700; }
/* ② 并集：逗号分隔 —— 三个标题共用同一套声明 */
h1, h2, h3 { font-family:"PingFang SC", sans-serif; }
/* ③ 后代：空格分隔 —— nav 里面所有层级的 a 都算 */
nav a { color:#b04a2c; }
</style>
<p class="hl">我是 p 且带 hl → 命中 ①</p>
<div class="hl">我是 div 带 hl → 不命中 ①（不是 p）</div>
<nav><ul><li><a href="#">导航里的链接 → 命中 ③</a></li></ul></nav>hl 的 div 不受影响；导航里的链接变蓝，外面的链接不变。p.hl 是交集（连写、无空格），p .hl 是后代（多了一个空格）。前者要求「同时是 p 且带 hl」，后者选的是「p 里面所有带 hl 的元素」——一个空格之差，命中范围完全不同，查错先查这里。u4/card.html（内部样式）<style>
.card { border:1px solid #e7ddca; border-radius:12px; padding:16px;
box-shadow:0 2px 8px rgba(0,0,0,.06); }
.card h3 { color:#b04a2c; }
a:hover { color:#b06a24; } /* 鼠标悬停变橙 */
</style>
<div class="card">
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<a href="#">查看详情</a>
</div><head> 里写 p{color:red} 又在 class 里写 .card p{color:blue}——学生常疑惑「为什么红的不生效」。答案是后代选择器（属于复合选择器）权重更高——.card p 是「类 10 分 + 标记 1 分 = 11 分」，压过单独的 p 那 1 分。这就是优先级实战。h1{color}，谁生效？为什么优先用外部样式？#nav a.current 和 a:hover 谁权重高？写出从低到高的选择器排序。:hover 属于哪类选择器？它常配合哪类元素做交互反馈？p.hl 和 p .hl 命中的元素一样吗？各写一句话说明它们分别选中了什么。h1、h2、h3 的字体统一成黑体，用哪种复合选择器最省事？写出这条规则。nav a 与 nav > a 有什么区别？什么时候必须用后者？layout.html 抽一个 style.css 出来，给 header 加底部分隔线、nav 链接 hover 变蓝、main 限宽居中、表格加斑马纹。用外部 <link> 引入。要求至少用上一种复合选择器（如后代 nav a 或并集 h1, h2），并在样式表里写注释说明为什么选它。p.hl（连写）、并集 h1, h2（逗号）、后代 nav a（空格）——三个符号别记混，多一格空格就是另一种选择器。做完点「检查本节」看解析与得分；做错可重做。