HTML/CSS CSS选择器优先级入门教程（完整版）

认识一下CSS选择器优先级

在HTML/CSS的技术栈里，CSS选择器优先级算不上最耀眼的，但绝对是最实用的之一。把它掌握好，日常开发效率能提升一个档次。

CSS选择器优先级的重点都在这了

• CSS选择器优先级的使用要适度，过度设计比不用更糟糕。
• 写CSS选择器优先级相关代码时，变量命名要能自解释，别用 a、b、c 这类名字。
• 遇到CSS选择器优先级不生效的情况，先确认版本和环境，再怀疑代码。
• CSS选择器优先级的文档注释写清楚参数含义和返回值，降低别人（和未来的自己）的理解成本。
• 用CSS选择器优先级处理并发场景时要格外小心，确认它是否线程安全。

以上是基础部分，下面看点实际的。

CSS选择器优先级实战代码

以CSS 选择器优先级为例：

/* 优先级从高到低：行内 > #id > .class/属性/伪类 > 标签 */

#nav .item { color: red; }      /* (1,1,0) 最高 */
.nav .item.active { color: blue; } /* (0,3,0) */
.item { color: green; }         /* (0,1,0) 最低 */

/* 规则：同级后写的覆盖先写的；不同级比权重 */
/* !important 能压一切，但会破坏可维护性，能不用就不用 */
/* 调试技巧：浏览器 DevTools 里被划掉的样式就是被覆盖了 */

新手常犯的错误

• 遇到问题先看日志，日志看不懂再把关键报错贴到搜索引擎，命中率很高。
• 不要在线上环境直接调试，复制一份数据到本地慢慢查。
• 正则表达式写完要多测几个边界用例，贪心和转义最容易出错。
• 备份永远是对的，尤其是动数据库之前，一条备份命令能救你一命。

收尾

希望这篇文章能帮你少走一些弯路。CSS选择器优先级这个话题还有更深的内容可以挖，我们留到以后再聊。

---

遇见问题加 QQ23979811 协助处理