内联样式特异性最高（1000），工具类即使带!important也无效；它劫持渲染链，使Bootstrap类失效；破局需移除style、收口为CSS类、标记必要内联样式并用DevTools排查。
内联样式天然具有最高特异性，!important 也救不了工具类
Bootstrap 4 的 .d-flex、.text-center 这类工具类虽然带 !important，但依然赢不了 style="display: inline-block" 或 style="color: #e74c3c" —— 因为内联样式的特异性值是 1000，而任何 class 选择器（包括带 !important 的）最多只有 100。浏览器按规则直接判内联样式胜出，连比都不用比。
style 属性会劫持整个渲染链，工具类根本插不进
当一个元素有 style="display: inline-block"，它就脱离了 Bootstrap 网格的 Flex 上下文；有 style="width: 200px"，它就无视 .col-8 的 flex-basis 计算；有 style="padding: 0"，它就绕过 .p-3 的所有响应式断点逻辑。工具类不是“覆盖”，而是“参与计算”——而内联样式已经把计算结果锁死了。
常见表现包括：
-
.col-8内嵌div加了style="display: inline-block"→ 输入框缩成窄条，内容区域塌陷 -
.navbar-brand被加了style="font-size: 18px"→ 即使你写.navbar-brand { font-size: 24px !important }，也不生效 - 富文本编辑器输出的
table带style="border: 1px solid #ccc"→.table-bordered的边框规则完全失效
真正能破局的只有三件事
别指望靠更强的 class 或更多 !important 拼刺刀。要解，得从源头切：
- 把所有
style属性从 HTML 中移除，统一收口到 CSS 类里（比如把style="color: red"替换为class="text-error"） - 对必须保留内联样式的场景（如邮件模板、首屏关键样式），用
/* email-only */注释明确标记，避免和业务 CSS 混淆 - 用 DevTools 的
[style]选择器快速筛选页面中所有内联样式，右键 “Break on attribute modification” 捕获 JS 动态插入的style，它们才是最隐蔽的破坏源
最难处理的从来不是技术方案，而是那些没留注释、没走 review、只在某次 hotfix 里随手加上的 style —— 它们不会报错，但会让后续所有人花三倍时间猜意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
