层叠、优先级与继承

学会用优先级预测哪条 CSS 规则会生效，并利用继承少写代码。

8 分钟 · 3 题

你写了一条规则、刷新页面……结果什么都没变。大多数情况下，罪魁祸首并不是 bug，而是层叠。当多条规则作用于同一个元素时，浏览器会按这个顺序打破平局：规则的来源（先是浏览器样式，再是你的样式）、选择器的优先级，最后才是代码中的出现顺序。掌握这套机制能帮你省下大量调试时间。

p {
  color: gray;
}

.article p {
  color: navy;
}

优先级用一个三段式分数来计算：(id 数, 类数, 元素数)。#menu 记作 1-0-0，.nav-link 记作 0-1-0，a 记作 0-0-1。你从左往右逐段比较：#menu（1-0-0）胜过 .nav .link .active（0-3-0），即便后者有三个类。思考练习：header nav a（0-0-3）和 .main-link（0-1-0）之间谁获胜？是类，因为一个类的分量超过任意多个元素。

header nav a {
  color: steelblue;
}

.main-link {
  color: crimson;
}

继承是你少写代码的好帮手：与文本相关的属性（color、font-family、font-size、line-height）会自动传递给后代元素。盒子属性（margin、padding、border、width）不会被继承——幸好如此，否则每个子元素都会继承父元素的边框。所以只需在最高层级把排版设置一次即可。

body {
  font-family: "Inter", sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

知识检测

确认你已牢记本课的重点内容。

1. 两条规则作用于同一个段落：先是 #intro { color: red; }，然后是 .text { color: blue; }。哪种颜色生效？
   • 蓝色，因为类是最后声明的
   • 红色，因为 id 比类更具体
   • 都不生效，浏览器会报冲突
2. 以下哪个属性默认会被后代元素继承？
   • margin
   • color
   • border
   • padding
3. 两个选择器的优先级完全相同，且作用于同一个元素。哪条规则获胜？
   • 样式表中写在最后的那条规则
   • 写在最前面的那条规则
   • 选择器最短的那条规则