HTML样式优先级判断技巧全解析

CSS样式优先级并非简单的“后写覆盖前写”，而是由!important声明、样式来源（行内样式 > 内部style标签 > 外部CSS文件 > 浏览器默认）和选择器特异性（ID=100、类=10、元素=1）三者共同决定的精密计算体系；掌握这一规则，就能快速定位为何某个color没生效——打开开发者工具，看被划掉的样式及其右侧来源标记与特异性数值，再结合常见陷阱（如拼写错误、scoped样式作用域、媒体查询失效、伪类顺序错误）逐一排查，让样式调试从玄学回归理性。

CSS 样式优先级不是“谁写在后面就赢”，而是有一套明确的计算规则——直接看 !important、来源、选择器特异性（specificity）三者叠加的结果。

怎么快速判断两个 color 哪个生效？

打开浏览器开发者工具（F12），选中元素，在 Styles 面板里找被划掉的那条声明：它被更高优先级的同名样式覆盖了。重点看每条样式右边的来源标记：inline > style 标签 > .css 文件 > 浏览器默认样式。

• !important 会提升单条声明的权重，但仅限于同类型来源（比如两个都是外部 CSS 里的 !important，才比没有的高）
• 行内样式（style="color: red;"）天然高于所有外部或内部样式表中的规则，哪怕后者用了 !important
• 同来源下，比的是选择器特异性：#header .nav a:hover 比 .nav a 高，因为 ID 选择器（100）+ 类（10）+ 元素（1）= 111，后者只有 11

!important 到底该不该用？

它能强制覆盖，但会破坏层叠逻辑，让调试变困难。只在以下场景可考虑：

• 第三方库样式侵入太深，又无法改源码（如某些 UI 组件库的内联样式）
• 需要在用户样式表（user stylesheet）中强制干预页面（极少见）
• 临时调试时加，确认问题后必须删掉

注意：!important 不继承，也不影响其他属性；多个 !important 同时存在时，仍按来源和特异性排序。

为什么加了 class 还没生效？常见陷阱

不是 class 没写对，就是被更“重”的规则压住了。检查这几处：

• 拼写错误：class="btn-primary" 但 CSS 里写成 .btn-prmiary（typo）
• 作用域限制：Vue/React 中 scoped style 或 CSS Modules 会自动加属性选择器，.btn 实际编译成 .btn[data-v-xxx]，无法被全局 JS 动态添加的 class 匹配
• 媒体查询未命中：@media (max-width: 768px) { .btn { display: none; } } 在桌面端自然不生效
• 伪类顺序错：a:link、a:visited、a:hover、a:active 必须按 LVHA 顺序写，否则 :hover 可能被 :link 覆盖

真正卡住的时候，别猜，开 DevTools 看 computed 样式，逐条往上点 Sources，看清哪一行被划掉、为什么被划掉——特异性数字、!important、来源路径，全在那里摆着。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML样式优先级判断技巧全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。