3.1三个规则打架，id 获胜
标记、类、id 三条规则同时想改颜色——权重高者胜，绿框标出胜者。
我被 p、.by-class、#by-id 三条规则同时点名 → 最终是 id 的绿色
/* 三条规则都命中同一个元素 */
/* 标记选择器 → 权重 (0,0,1) */
p { color: #8A5A08; }
/* 类选择器 → 权重 (0,1,0)，赢了 p */
.by-class { color: #B04A2C; }
/* id 选择器 → 权重 (1,0,0)，最高！ */
#by-id { color: #3F6E6A; }记忆口诀：行内 > id > 类 > 标记。不是「谁写在后面谁赢」，而是先比权重、再看书写顺序。
3.2权重怎么打分：三位数记法
把权重记成 (a, b, c) 三个数：a=id 个数，b=类/伪类/属性个数，c=标记个数。
1
0
0
0
2
0
0
1
1
0
0
2
#nav → (1,0,0) 最强
.list .item → (0,2,0)
p.intro → (0,1,1)
ul li → (0,0,2)
/* 比较：从左往右逐位比大小，
(0,2,0) > (0,1,99) ——
第二位的 2 直接获胜，
后面数字再大也不看 */所以 11 个类的权重 (0,11,0) 打不过 1 个 id (1,0,0)——逐位比，不是求和。这是考试与面试的必考陷阱。
3.3同权重：后来居上层叠的含义
权重一样时，写在后面的规则覆盖前面的——这就是「层叠」两个字的本义。
第一条规则：陶土红底
同名同权重，写在后面 → 青色系获胜
.dup {
background: #F3E0D5;
color: #8C3A22;
}
/* 权重同为 (0,1,0)，
但它写在后面 → 生效 */
.dup {
background: #E2ECEA;
color: #3F6E6A;
}排查样式冲突时的铁律：先比权重，权重同再比位置。浏览器开发者工具里被划掉的属性 = 被覆盖的。
3.4!important：一票否决权慎用
任何声明带上 !important 就越过权重体系直接生效，行内样式也得让路。
行内样式（红色）输给了带 !important 的外部规则
/* 行内样式 style="color:#B04A2C"
本来权重最高，但…… */
#by-id.by-class {
color: #3F6E6A !important; /* 翻盘 */
}
/* 优先级最终顺序：
!important > 行内 > id > 类 > 标记 */!important 像「违停压线」：能走但破坏规则，用多了以后只能用更多的 !important 来救——能不用就不用。
3.5继承：有些属性「祖传」，有些不会
color、font 系会传给子孙；border、margin 等盒模型属性不继承。看虚线框内外的差别。
父元素：红色 17px 加粗
子元素：颜色/字体继承了，边框没继承（得自己写才有）
子元素显式写 color:#2B2520 → 继承被打断
/* 会继承的：文字外观类 */
.parent {
color: #B04A2C; /* ↓传 */
font-size: 17px; /* ↓传 */
font-weight: 600; /* ↓传 */
border: 1px solid; /* ✗ 不传 */
margin: 10px; /* ✗ 不传 */
}
/* 关键字 inherit / initial 可以
显式控制继承 */
.child.no { color: #2B2520; }经验法则：「跟字有关」的会继承，「跟盒子有关」的不继承。全局字体常设在 body 上，就是靠继承传遍全页。