HTML/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. 遇到问题先看日志，日志看不懂再把关键报错贴到搜索引擎，命中率很高。

一点总结

HTML/CSS开发的进阶之路，就是由一个个像CSS选择器优先级这样的知识点铺成的。走好每一步，时间会给你答案。

---

遇见问题加 QQ23979811 协助处理