小明的“样式失踪案”
某天，前端新人小明信心满满地写了一个按钮样式：
.btn { color: blue; }
但页面上按钮却顽固地显示红色！原来，同事老张在代码里偷偷写了：
#header .nav .btn { color: red; }
小明百思不得其解：“明明我的样式写在后面，为什么被覆盖了？” 这就是CSS选择器优先级在“作祟”。
优先级规则：样式世界的“权力游戏”
1. 权重计算口诀：
- 内联样式（
style="..."） > ID选择器（#id） > 类/属性/伪类（.class） > 标签/伪元素（div） > 通配符（*） !important强制“称王”，但慎用。
2. 权重的数值化：
- ID选择器：100分
- 类/属性/伪类：10分
- 标签/伪元素：1分
- 例子：
.nav li.active的权重是0,1,2（总分：10+1+10=21分）
开发者常踩的“三大坑”
1. 滥用 !important
为快速解决问题，随手加 !important，导致后续维护时“优先级战争”爆发。
.text { color: black !important; }
/* 后续无法用更高优先级覆盖！ */
解决方案：
- 仅在覆盖第三方库或行内样式时使用。
- 优先优化选择器结构，而非依赖
!important
2. 选择器嵌套过深
长链选择器（如 .parent .child span）导致权重失控，且性能下降。
/* 权重：0,2,1（总分：21） */
#sidebar .list .item a { ... }
解决方案：
- 用 类名扁平化 替代嵌套，如
.item-link。 - 使用 BEM命名规范（如
.block__element--modifier）。
3. 单位与继承的迷惑
混淆相对单位（em、rem）和绝对单位（px），或误用继承属性。
.parent { font-size: 16px; }
.child { font-size: 1.2em; } /* 实际为19.2px，而非相对于根元素 */
解决：
- 全局字体用
rem，局部用em，em相对于本元素的字体大小，或者在用于font-size时相对于父元素的字体大小。rem相对于根元素的字体大小。 - 显式重置继承属性（如
font-family: inherit;）
高效管理优先级的“三把钥匙”
1. 保持选择器简洁：
用类名代替层级，如 .card-title 而非 .container .card h2。
2. 利用现代布局方案：
用 Flexbox/Grid 替代浮动布局，减少 clearfix 等 hack 代码。
3. 工具辅助检查：
浏览器开发者工具（F12）的 样式面板 可直观查看优先级冲突。
优先级的“禅意”
理解优先级，本质是理解CSS的“层叠”哲学：
- 规则越精准，权力越大。
- 代码越简洁，维护越轻松。
下次当你的样式“神秘失踪”时，不妨默念：权重计算、减少嵌套、慎用核武!important😉
🔥 关注我的公众号「哈希茶馆」一起交流更多开发技巧
