HTML/CSS CSS选择器优先级实战详解（附代码示例）

认识一下CSS选择器优先级

这篇文章的起因很简单：后台收到好几位读者问CSS选择器优先级相关的问题，而且问题高度相似。看来有必要把这个问题集中讲一次。

掌握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 里被划掉的样式就是被覆盖了 */

避坑指南

1. 报错信息要完整阅读，堆栈的第一行和最后一行最有价值。
2. 第三方接口调用要加超时和重试，别让别人的故障拖垮你的服务。
3. 配置文件不要用记事本编辑，编码问题会让你怀疑人生。
4. 磁盘空间不足会引发各种莫名其妙的问题，监控告警要配上。

结语

本文梳理了CSS选择器优先级的核心用法和注意事项。如果你只记住一句话，那就是：先理解场景，再选择用法。

---

遇见问题加 QQ23979811 协助处理