内联样式总能赢，因其 specificity 权值固定为1000，远超任何css选择器（如#header .nav a仅120），且不参与选择器匹配；!important无法覆盖，除非也用于style属性中。
内联样式（style）为什么总能赢？
因为浏览器的层叠规则里，style属性的 specificity 权值固定为 1000，远高于任何 CSS 选择器——哪怕 #header .nav a 这种带 ID 的复合选择器也才 120。这不是“写在后面就生效”，而是硬编码进渲染引擎的计算逻辑。
常见错误现象：button { color: blue !important } 在 DevTools 里被划掉，但按钮还是红色；检查 Elements 面板发现该元素有 style="color: red"，或者 JS 正在运行时执行了 el.style.color = "red"。
使用场景有限：只适合动态覆盖（如动画帧、表单校验提示、服务端注入的邮件模板），不适合常规样式管理。
容易踩的坑：
-
element.style.cssText = "color:red"容易漏空格或分号，建议改用element.style.color = "red" - 框架中
:style或style={{}}渲染后仍是内联样式，同样具备 1000 权值 - 无法写伪类（
:hover）、媒体查询（@media）、或组合选择器，本质是单条声明快照
data-* 和 class 不参与样式优先级竞争
data-* 属性和 class 属性本身不触发任何样式计算，它们只是数据容器或分类标识。真正影响样式的，是 CSS 中如何使用它们——比如 .btn-primary 或 [data-status="error"] 这类选择器。
关键区别在于：前者靠 class 名匹配，后者靠属性存在性或值匹配，两者 specificity 权值相同（都是 10），但行为完全不同。
容易踩的坑：
-
data-命名必须全小写+连字符，data-userId无效，data-user-id才合法 - JS 读取时自动转驼峰：
dataset.userId对应data-user-id，不是dataset.userid -
class多值空格分隔，但 CSS 选择器中不能写成.a.b.c就认为它匹配class="a b c"——它确实匹配，但权重是 30（三个 class），不是 10
全局属性如 hidden、contenteditable 会间接影响样式表现
hidden 不是 CSS 的 display: none 简写，它语义上表示“该元素不应被呈现”，浏览器会直接跳过渲染流程；而 hidden="until-found" 则等效于 content-visibility: hidden，元素仍参与布局但不绘制，这对长列表性能很关键。
contenteditable 启用后，浏览器会自动给元素加一层默认编辑样式（如光标、选区高亮），这些样式可能覆盖你写的 outline 或 caret-color，且无法用普通选择器精准重置。
容易踩的坑：
-
hidden是枚举属性，hidden="false"依然生效（只要属性存在就隐藏），正确关闭是removeAttribute('hidden') -
contenteditable="plaintext-only"在 Firefox 中支持，在 Safari 中可能退化为true，需降级测试 - 某些 UI 库（如 TinyMCE）会动态切换
contenteditable，导致你写的 CSS 规则突然失效
别指望 !important 能绕过内联样式的控制权
!important 只能在 CSS 规则中提升某条声明的权重，但它无法改变浏览器对 style 属性的强制优先级处理。换句话说：外部 CSS 里写 color: blue !important，依然输给元素自身的 style="color: red"。
真正有效的做法，是把控制权从内联样式手里拿回来——不是对抗，而是接管。
实操建议：
- 清空全部内联样式：
el.removeAttribute('style')，再通过 class 控制 - 只删某条属性：
el.style.removeProperty('opacity')，避免误伤其他动态计算值（如width） - 若必须保留部分内联样式，先备份：
const saved = el.style.cssText，操作完再恢复 - Tailwind 或 PostCSS 构建流程中，
!important可能被插件剥离（如postcss-preset-env默认移除），需确认配置是否保留
最常被忽略的一点：很多“样式覆盖失败”问题，根源不在 CSS 写法，而在 JS 动态设置了 element.style.xxx 却没清理。查 Elements 面板里的 style 属性，比翻十遍 CSS 文件更直接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
