前端Wiki/CSS/基础/选择器

优先级与!important

当多条规则命中同一元素时，浏览器为每条选择器计算一个优先级权重，由三段数字组成：

ID 选择器 记为 1,0,0
类 / 伪类 / 属性选择器 记为 0,1,0
标签 / 伪元素选择器 记为 0,0,1

三段数字逐位比较：1,0,0 永远大于 0,99,0。组合选择器把各部分相加即可，如 .nav .item 是 0,2,0，#main p 是 1,0,1。权重相同时，后写的规则获胜。

两种特殊情况会越过权重体系：内联样式高于一切普通规则；!important 又高于内联样式。但 !important 是「手段不是工具」——一旦滥用，之后所有冲突都只能再加 important 来对抗，样式表会迅速失控。正确做法是通过提高选择器权重或调整书写顺序来解决问题。

本节要点权重三段式「id/类/标签」逐位比较；相同权重后写者胜；!important 只在覆盖第三方样式等紧急场合使用，切勿当默认手段。

CSS

<style>
  p        { color: gray; }   /* 0,0,1 */
  .msg     { color: blue; }   /* 0,1,0 —— 赢过上面 */
  #first   { color: green; }  /* 1,0,0 —— 赢过前面所有 */
  p.msg    { color: orange; } /* 0,1,1 —— 仍输给 id */
  .final   { color: red !important; } /* 强制最终值 */
</style>
<p id="first" class="msg final">这段文字最终是红色</p>

🔗 相关词条组合选择器属性选择器浏览器伪元素选择器标签元素伪类

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读