style属性权重固定为(1,0,0,0)即1000，是CSS层叠中唯一封顶的优先级，所有外部选择器a位均为0，故高位比较直接判负，无法通过增加类名或ID覆盖；!important对其无效。
style属性的权重是固定的1000，不是“比较高”，而是“封顶”
它不参与选择器匹配，也不看ID或类名数量，直接硬编码为 (1,0,0,0) —— 这是CSS层叠规则里唯一能稳压所有外部和内部样式的选择器类型。哪怕你写 #app .header button:hover { color: red !important; }，只要元素上有 style="color: blue"，显示的就是蓝色。
常见错误现象：改了外部CSS，页面没变化；DevTools里看到目标样式被划掉，来源标着 element.style；用JS设过一次 el.style.display = 'block'，后来删了JS代码，但元素还是显示——因为 style 属性本身还在DOM上，值是空字符串或旧值，浏览器照样解析。
-
style里的声明永远赢，!important在外部CSS中对它完全无效 - 框架如 Vue 的
:style、React 的style={{}}，最终都渲染成style属性，同样算(1,0,0,0) - JS动态设置时要用驼峰命名（
backgroundColor），但HTML里写的是短横线（background-color）
权重计算不是加法，是四元组按位比较
CSS权重本质是 (a,b,c,d) 四元组，从左到右比大小，高位相等才看下一位。而 style 的 a 恒为1，其他所有选择器的 a 都是0，所以根本比不到后面三位。
例如：#user .profile > p::first-line 算出来是 (0,1,1,2)，看着挺高，但遇到 style="font-size: 16px"（即 (1,0,0,0)），直接判负。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- ID选择器（
#id）只贡献b=1，不是100；类名（.cls）只贡献c=1，不是10 - 嵌套再深、选择器再长，也只增加
d，最多凑到个位数，远不如一个a=1 -
:not(.active)不额外加权，但括号里的.active算1个c
怎么快速确认是不是被style劫持了
打开DevTools → 选中元素 → 切到 Computed 标签页 → 找目标属性（比如 color）→ 展开后看来源。如果某条声明带删除线，且来源写着 element.style，那就是它在起效。
更直白的办法：切到 Elements 面板，直接看该元素的 style 属性有没有值。有值且非空，基本就是它说了算。注意运行时JS写的不会出现在原始HTML里，但会在面板里实时显示出来。
- 若看到属性被划掉、又没在
style属性里找到对应项，大概率是JS执行后写了element.style.xxx - 临时加
<style></style>调试时，得先清掉style属性或JS逻辑，否则改了也看不到效果 - 没有纯CSS方案能绕过
style，唯一可控路径是JS主动清除：el.style.color = ''或el.removeAttribute('style')
哪些场景真该用style属性
它不是“能用就用”，而是“非它不可”的少数情况。滥用会导致样式失控、调试困难、gzip体积膨胀。
- JS动态控制单个元素的瞬时状态，比如
el.style.transform = `translateX(${x}px)` - 服务端渲染一次性注入样式（如邮件模板，Outlook等客户端只认内联）
- 调试时临时覆盖，比打开DevTools改更快（但记得删）
- 独立HTML页面无构建流程，又需要响应式但不想加载额外CSS文件
真正容易被忽略的是：一旦JS写了 element.style.xxx，这个值就“粘”在DOM上了，后续CSS规则哪怕权重再高也进不来——除非你手动清，或者用 all: unset 这类重置手段，但那已是另一层博弈了。
