CSS 与响应式布局
连接样式表与理解层叠
创建独立 CSS 文件，用选择器命中元素，并用开发者工具判断哪条规则获胜。
- 难度
- 入门
- 预计时间
- 40 分钟
- 最近验证
- 2026/9/21
这一节要完成什么
创建独立 CSS 文件，用选择器命中元素，并用开发者工具判断哪条规则获胜。
先理解：为什么要学它
选择器决定匹配谁，层叠决定冲突时谁赢。
跟着做
/* css/style.css */
:root {
color-scheme: light;
}
body {
color: #1f2937;
background: #fffaf5;
}
.site-title {
color: #c2410c;
}
header .site-title {
color: #9a3412;
}- 在项目根目录新建
css/style.css。 - 在每个 HTML 的 head 中加入
<link rel="stylesheet" href="css/style.css">，子目录页面按位置调整路径。 - 给主标题增加
class="site-title"，刷新后确认规则生效。 - 在 DevTools 的 Styles 面板查看被划掉的声明，解释 specificity 与后写规则。
关键代码怎么读
- 选择器决定匹配谁，层叠决定冲突时谁赢。
- 类选择器适合复用，避免为了样式滥用 id。
- 先检查文件是否加载，再讨论优先级。
常见错误：看到什么，检查什么
| 现象 | 检查方法 |
|---|---|
| 整页没有样式 | 检查 link 的相对路径和 Network 里的 404。 |
| 改了规则没有变化 | 检查拼写、匹配元素和被覆盖声明。 |
自己完成一次
给导航链接添加 .nav-link 类，分别写普通规则和 header .nav-link 规则，预测并验证最终颜色。
完成后再看参考答案
DevTools 应显示两个规则都匹配，组合选择器的声明生效；删除组合规则后类规则接管。
完成检查
- 我完成了本节要求的可见结果
- 我能解释关键代码的输入、处理和输出
- 我测试了正常、边界和错误情况