HTML/CSS CSS选择器优先级完整指南（新手必看）

CSS选择器优先级相关的资料网上一搜一大把，这篇文章有什么不同？区别在于：只讲实战中验证过的经验，不抄文档，不堆概念。

被低估的CSS选择器优先级

学HTML/CSS学到一定阶段，CSS选择器优先级是必须要过的一关。它不算高深，但非常实用，几乎所有稍具规模的项目都会用到。

吃透CSS选择器优先级：核心概念梳理

• 把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 协助处理