HTML标签本身无优先级，CSS规则权重由四元组(a,b,c,d)决定：内联样式(a=1)＞ID选择器(b)＞类/属性/伪类(c)＞元素/伪元素(d)，逐位比较，不进位。
HTML标签本身没有优先级，只有CSS规则有计算权重
很多人误以为 <h1> 比 <p> “优先级更高”，其实 HTML 标签在样式层叠中不自带优先级。真正起作用的是你为它们写的 CSS 选择器——比如 h1、p、.title、#header 这些选择器各自有可计算的权重值（a,b,c,d），浏览器靠这个决定哪条规则生效。
常见误解包括：
- 认为语义化标签（如
<article>）天然比<div>更容易被样式命中 —— 实际上，若没写对应选择器，它连样式都不会匹配到 - 把“渲染顺序”当“优先级”——
<script>放在<head>还是<body>底部影响执行时机，但和 CSS 权重无关 - 混淆“继承”与“优先级”：
color能从<body>继承下来，是因为它可继承，不是因为body权重高；而如果同时写了p { color: red; }和.text-red { color: blue; }，那谁赢取决于选择器权重，不是标签本身
如何快速判断哪个 CSS 规则会生效
最可靠的方式是打开浏览器开发者工具（F12），选中元素，在 Styles 面板里看哪些规则被划掉（strikethrough），哪些保留；被划掉的，就是被更高权重或后定义规则覆盖了。
更进一步，可以手动比对两条规则的权重四元组（a,b,c,d）：
立即学习“前端免费学习笔记（深入）”；
-
style="color: green;"→ a=1, b=0, c=0, d=0 -
#nav .active:hover→ a=0, b=1（#nav）, c=2（.active + :hover）, d=0 -
ul li a[title]→ a=0, b=0, c=1（[title]）, d=3（ul + li + a） -
div p span→ a=0, b=0, c=0, d=3
比较时从左到右：a > b > c > d；同一位相等才比下一位。例如 0,1,0,0（ID）一定大于 0,0,99,99（99个类+99个标签）。
!important 不是“终极解决方案”，而是调试信号
!important 会绕过整个权重计算逻辑，但它不改变选择器本身的权重值，只是强制提升该声明的“应用权”。它的问题在于：
- 一旦在第三方库或框架样式里用了
!important，你就很难用常规方式覆盖它（除非你也用!important，且权重更高） - 多个
!important同时存在时，仍要按原始权重 + 定义顺序来判断，不是“谁写了就赢” - 在组件化开发中，
!important很可能被 Shadow DOM 或 scoped style 隔离，导致无效
建议只在临时调试、覆盖内联样式（如某些 CMS 输出）或极少数必须打破封装的场景下使用，不要把它当成日常写法。
继承样式永远输给直接指定的规则
哪怕父元素用了 style="font-size: 24px;"（a=1），子元素只要写一条 small { font-size: 12px; }（d=1），就会生效——因为继承不是“规则”，而是“后备 fallback”；它只在没有任何规则显式设置该属性时才起作用。
这意味着：
-
inherit关键字是主动触发继承，不是默认行为；不写它，也不代表不继承（可继承属性本来就会继承） - 用
getComputedStyle(el).getPropertyValue('color')查到的值，已经是继承、层叠、计算后的结果，无法反推是哪条规则贡献的 - 想阻止继承？用
unset或具体值覆盖，而不是删掉父级样式——删了父级，子级可能取到浏览器默认值，反而更难控
真正容易被忽略的点是：权重计算只发生在“匹配到该元素的选择器”之间；没匹配上的规则，再高权重也等于不存在。所以与其死磕数字，不如先确认选择器是否真的命中了目标元素。
