html文档结构本身不参与样式优先级判定，真正起作用的只有style属性、css规则来源及选择器特异性（a,b,c,d）；class顺序、嵌套深度、标签名等均不影响权重计算，内联style始终最高，且不参与特异性比较。
HTML 文档结构本身不参与样式优先级判定——所谓“结构影响优先级”，其实是开发者误把 DOM 位置、标签嵌套深度或 class 顺序当成了权重依据。真正起作用的，只有三样东西：style 属性、CSS 规则来源（内联/内部/外部）、以及选择器特异性（a,b,c,d）。
为什么和样式一样？
class 属性值是空格分隔的字符串，浏览器只把它当作一个整体传给 CSSOM；类名顺序不影响匹配过程，也不改变特异性计算。.a.b 和 .b.a 权重完全相同（都是 0,0,2,0），谁写在后面、谁在 HTML 里靠前，都不起作用。
- class 列表不是“优先队列”，
class="btn primary active" 不代表 .btn 比 .active 更高权
- 真正决定覆盖关系的是 CSS 文件里哪条规则先定义、哪条用了
!important、或者有没有内联 style
- Vue/React 的动态绑定（如
:class="{a: x, b: y}"）最终也只生成 class 字符串，不引入新权重逻辑
嵌套层级深就一定优先级高？
不会。后代选择器 nav ul li a 的权重只是 0,0,0,4，远低于一个 ID 选择器 #menu（0,1,0,0）。深层嵌套反而拖慢样式计算，因为浏览器要逐层向上检查继承与匹配，但不提升任何权重。
-
div > p > span 和 span 的权重差在 d 位（0,0,0,3 vs 0,0,0,1），但依然被 .highlight（0,0,1,0）轻松超越
- 用
body article section header h1 这种“长链”写法，既没提高优先级，又增加解析开销，纯属反模式
- 真正影响渲染性能的是选择器复杂度，不是“看起来更具体”
style属性和CSS文件里的!important谁赢？
style 属性永远赢。它不参与特异性计算，而是直接跳过选择器匹配阶段，写进元素的 element.style 对象。哪怕你在外部 CSS 里写 div { color: red !important; }，只要 HTML 里有 <div style="color: blue">，蓝色就生效。
<ul>
<li>
<code>!important 只在同源 CSS 规则间起作用（比如两个都在 .css 文件里），无法突破内联样式的天然屏障
el.style.color = 'green' 会覆盖 style="color: blue"，但这是 JS 赋值行为，不是优先级比较
框架如 React 的 style={{color: 'red'}} 本质也是设置 style 属性，所以它天然压制所有 class 规则
最容易被忽略的一点：HTML 结构里的 class 名、ID 名、甚至整个标签名，对样式计算来说只是“待匹配的字符串”。浏览器不会因为你写了 <main class="layout-primary"></main> 就多给它一分权重——权重只来自 CSS 规则本身怎么写，而不是你在 HTML 里怎么组织它们。
样式一样？
框架如 React 的
class 属性值是空格分隔的字符串，浏览器只把它当作一个整体传给 CSSOM；类名顺序不影响匹配过程，也不改变特异性计算。.a.b 和 .b.a 权重完全相同（都是 0,0,2,0），谁写在后面、谁在 HTML 里靠前，都不起作用。
- class 列表不是“优先队列”，
class="btn primary active"不代表.btn比.active更高权 - 真正决定覆盖关系的是 CSS 文件里哪条规则先定义、哪条用了
!important、或者有没有内联style - Vue/React 的动态绑定（如
:class="{a: x, b: y}"）最终也只生成 class 字符串，不引入新权重逻辑
嵌套层级深就一定优先级高？
不会。后代选择器 nav ul li a 的权重只是 0,0,0,4，远低于一个 ID 选择器 #menu（0,1,0,0）。深层嵌套反而拖慢样式计算，因为浏览器要逐层向上检查继承与匹配，但不提升任何权重。
-
div > p > span和span的权重差在d位（0,0,0,3vs0,0,0,1），但依然被.highlight（0,0,1,0）轻松超越 - 用
body article section header h1这种“长链”写法，既没提高优先级，又增加解析开销，纯属反模式 - 真正影响渲染性能的是选择器复杂度，不是“看起来更具体”
style属性和CSS文件里的!important谁赢？
style 属性永远赢。它不参与特异性计算，而是直接跳过选择器匹配阶段，写进元素的 element.style 对象。哪怕你在外部 CSS 里写 div { color: red !important; }，只要 HTML 里有 <div style="color: blue">，蓝色就生效。
<ul>
<li>
<code>!important 只在同源 CSS 规则间起作用（比如两个都在 .css 文件里），无法突破内联样式的天然屏障
el.style.color = 'green' 会覆盖 style="color: blue"，但这是 JS 赋值行为，不是优先级比较style={{color: 'red'}} 本质也是设置 style 属性，所以它天然压制所有 class 规则最容易被忽略的一点：HTML 结构里的 class 名、ID 名、甚至整个标签名，对样式计算来说只是“待匹配的字符串”。浏览器不会因为你写了 <main class="layout-primary"></main> 就多给它一分权重——权重只来自 CSS 规则本身怎么写，而不是你在 HTML 里怎么组织它们。
