内联样式优先级最高但非万能，实际覆盖混乱主因是选择器权重、!important、加载顺序及继承规则；应避免JS直接操作style，改用classList；外链CSS优先级取决于引入顺序、特异性和!important；推荐BEM命名、禁用!important、使用CSS变量统一管理。
内联样式（style属性）优先级最高，外链CSS最低，但实际覆盖混乱往往不是因为“谁高谁低”记错了，而是忽略了选择器权重、!important、加载顺序和继承/层叠规则这些关键变量。
内联style确实优先，但不是万能的
元素写上 style="color: red;"，确实会盖过所有外部样式表里同名属性（如 p { color: blue; }），但它只作用于当前元素，无法影响子元素，也不能被伪类（如 :hover）或媒体查询动态覆盖。更关键的是：一旦JS反复操作 element.style.xxx，就容易和CSS类里的声明打架，导致样式反复切换、闪烁或失效。
- 避免在JS中直接写
el.style.color = "red"，改用el.classList.add("active")控制预设类 - 若必须用内联，统一收口到一个函数管理，别散落在各处逻辑里
- 内联样式无法被CSS动画或过渡（
transition）捕获，除非配合will-change或重排
外链CSS的“低优先级”常被误解
外链样式表本身没有固有优先级高低，真正起作用的是：文件引入顺序 + 选择器特异性（specificity）+ 是否使用 !important。比如：
-
<link rel="stylesheet" href="base.css">在前，<link rel="stylesheet" href="theme.css">在后 → 后者同权重规则会覆盖前者 -
.btn.primary { color: #007bff; }比.btn { color: #6c757d; }权重高（类选择器数量更多），即使写在前面也会胜出 - 用
!important可提升单条声明权重，但会破坏可维护性，建议仅用于第三方库冲突兜底或主题切换开关
快速定位覆盖源头的实操方法
打开浏览器开发者工具（F12），选中元素，在「Styles」面板里看右侧：被划掉的样式就是被覆盖的；没划掉但没生效？点开对应CSS文件路径，确认是否真的加载成功（Network里查404）；颜色值显示灰色？可能是继承来的，顶部会标“inherited from”。重点看三列：
立即学习“前端免费学习笔记（深入）”；
- 来源列：区分是 inline、
-
权重标记：带
!important的会标星号，内联样式旁有 “attribute” 提示 - 勾选/取消勾选：临时禁用某条规则，立刻验证是否是它导致问题
长期减少覆盖混乱的设计习惯
不靠死记优先级数字，而靠结构约束：
- 约定外链CSS按「重置 → 基础组件 → 布局 → 页面专属」顺序引入
- 组件内部样式尽量用 BEM 类名（如
header__title--large），避免依赖元素嵌套深度 - 全局禁用
!important，CI流程里加 ESLint 规则no-important - 用 CSS Custom Properties（变量）替代高频覆盖，比如
--text-color: #333;，一处改，多处响应
