HTML/CSS CSS选择器优先级实战详解（新手必看）

提到CSS选择器优先级，不少人的第一反应是「这个我熟」。可真要细问几个细节，能答上来的人并不多。不妨跟着本文自查一下，你对CSS选择器优先级的掌握能打几分。

被低估的CSS选择器优先级

最近在项目里重度用到了CSS选择器优先级，踩过一些坑，也总结出一些心得。趁记忆还新鲜，整理成文，供同样在用HTML/CSS的朋友参考。

关于CSS选择器优先级的关键知识

• 不要迷信CSS选择器优先级的某种「最佳实践」，结合自己的业务场景做判断。
• 把CSS选择器优先级的注意事项写进团队的 Code Review 清单，从源头减少问题。
• 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选择器优先级是HTML/CSS开发的基本功之一。基本功的意义不在于炫技，而在于让你的每一行代码都写得心里有底。

---

遇见问题加 QQ23979811 协助处理