内联样式优先级最高，特异性值为1000，高于所有CSS选择器（包括!important），仅同属性的!important声明可覆盖它；CSS变量取值取决于使用位置的最近有效作用域。
内联样式和 CSS 类同时存在时，谁赢？
内联样式（style 属性）优先级高于任何外部或内部 CSS 规则，包括 !important 以外的所有选择器。这不是“浏览器偏好”，而是 CSS 优先级计算中明确规定的权重：内联样式的特异性（specificity）值为 1000，而 ID 选择器才 100，类/属性/伪类是 10，元素/伪元素是 1。
常见错误现象：div.my-class { color: red !important; } 写了 !important，但 HTML 里写了 <div style="color: blue">，结果还是蓝色——因为 style 是内联，它不参与选择器特异性比较，直接“越狱”到最高层。
- 只有
!important能压过内联样式，但必须写在同一条声明里（比如color: red !important;），且仅对那个属性生效 - React/Vue 等框架中用
className或class绑定类名，不会自动覆盖style；但用style={{}}动态注入时，本质仍是内联，同样具有最高优先级 - 不要指望用多个类叠加提升优先级来干掉内联样式，没用
!important 真的能解决所有冲突吗？
不能。!important 只在「同层级声明」中起作用，它不改变选择器特异性，只在比较「相同来源、相同特异性」的规则时，把带 !important 的声明顶上去。一旦遇到更高特异性的规则（比如内联样式），它就失效。
使用场景：适合覆盖第三方库强制加的内联样式（比如某些 UI 组件库的行内 style），但前提是你要在自己的 CSS 中也加 !important，且确保该规则被加载、未被更早的同名声明覆盖。
立即学习“前端免费学习笔记（深入）”；
-
!important不会跨源生效：外部 CSS 文件里的!important无法影响内联样式，除非你用 JS 动态改style属性 - 多个
!important并存时，仍按特异性 + 源顺序决定谁生效，不是“谁最后写谁赢” - 在 CSS-in-JS 方案（如 styled-components）中，
!important依然有效，但容易让调试链路变长——你得查 JS 对象、生成的 class、最终插入的<style>标签三处
浏览器 DevTools 里看到的“已删除线”样式，到底有没有生效？
有。划掉 ≠ 无效。DevTools 中某条样式显示删除线（strikethrough），只表示它被**同名、更高优先级的其他声明覆盖了**，但它本身仍被解析、计算、参与层叠过程。哪怕整条规则都划掉了，只要它没语法错误，就还在 CSSOM 里。
性能影响很小，但调试时容易误判：你以为删掉某条 CSS 就能解决问题，其实真正起效的是另一处你没注意到的规则（比如父元素的 color 继承、或者某个通配符 * { box-sizing: border-box; }）。
- 点击右侧的“computed”面板，看最终生效的值从哪来——那里会标出具体文件、行号、甚至是否来自继承
- 如果某条规则反复被划掉，先检查是否用了
all: unset或all: revert这类重置指令，它们会影响整块声明，比单个属性更隐蔽 - Shadow DOM 内部样式不会出现在 Light DOM 的 DevTools 样式列表里，但会在“computed”中体现，容易漏看
自定义属性（CSS 变量）的优先级怎么算？
CSS 变量本身没有优先级，它的值由 var(--x) 被使用的**位置**决定。也就是说，变量取值取决于当前元素上定义该变量的最近有效作用域，而不是定义变量的地方。
典型陷阱：你在 :root 定义了 --color: red，又在某个 .card 上写了 --color: blue，那么 .card p { color: var(--color); } 拿到的就是 blue，哪怕 p 自己没定义变量。
- 变量查找是向上遍历 DOM 树，不是按 CSS 文件顺序；所以嵌套组件中变量很容易被意外覆盖
-
var(--x, fallback)的 fallback 值不参与优先级计算，只在变量未定义时兜底，它本身受所在声明的优先级约束 - JS 修改
element.style.setProperty('--x', 'green')相当于给该元素加了一条内联变量定义，优先级等同于内联样式
实际项目里最麻烦的从来不是“哪个规则优先级高”，而是“这个值到底从哪来的”。尤其在用 Web Components、CSS-in-JS、Tailwind 的 @layer 或 PostCSS 插件时，样式来源可能横跨 JS 对象、HTML 属性、多层嵌套的 <style> 标签——这时候光看 DevTools 的 styles 面板根本不够，得切到 computed 再顺藤摸瓜。
