内联样式优先级最高，会覆盖外链或内部样式，这是CSS层叠机制的正常表现；其优先级顺序为：内联样式（1000）＞ID选择器（100）＞类/属性/伪类（10）＞元素/伪元素（1）＞通配符/继承/默认（0），权重不进位，!important需谨慎使用。
外链样式和内联样式冲突时，内联样式的优先级更高，会覆盖外链（或内部）样式。这不是“bug”，而是 CSS 层叠（Cascading）机制的正常表现。关键在于理解优先级如何计算、何时生效，以及如何合理干预。
CSS 优先级的基本顺序（从高到低）
当多个规则作用于同一元素的同一属性时，浏览器按以下顺序决定谁生效：
-
内联样式（如
style="color: red;"）→ 权重为1000 -
ID 选择器（如
#header）→ 权重为100 -
类、属性、伪类选择器（如
.btn、[type="text"]、:hover）→ 权重为10 -
元素选择器和伪元素（如
div、::before）→ 权重为1 -
通配符、继承、浏览器默认样式→ 权重为
0
注意：权重不进位。比如 10 个类选择器（10×10=100） 仍低于 1 个 ID（100），但等于 1 个 ID；而 11 个类 = 110 就高于 ID。
!important 不是解药，但有明确规则
!important 会提升声明级优先级，但它不参与权重计算，而是单独比较：
立即学习“前端免费学习笔记（深入）”；
- 内联样式带
!important→ 仍可被另一个带!important的更高权重规则覆盖（比如 ID + !important） - 外链样式中写
color: blue !important;可覆盖无!important的内联样式 - 但两个
!important规则冲突时，仍按选择器权重 + 源顺序（后定义者胜）判断
⚠️ 建议只在调试、第三方组件覆盖、CSS-in-JS 等有限场景谨慎使用，避免滥用导致维护困难。
层叠顺序：当优先级相同时，谁赢？
权重相同的情况下，按以下顺序决胜负（从低到高，高者胜）：
- 浏览器默认样式（最低）
- 外链 CSS 文件（按
<link>引入顺序，后引入的文件内规则优先） - 内部样式表（
<style></style>，后写的规则覆盖先写的） - 内联样式（
，始终高于上面三类） - 开发者工具中手动添加的样式（最高，仅用于调试）
例如：外链 main.css 和 theme.css 都定义了 h1 { color: green; }，若 theme.css 后引入，则它生效。
实际建议：减少冲突比强行覆盖更有效
与其反复用 !important 或堆砌高权重选择器，不如从结构上规避冲突：
- 避免在 HTML 中写内联样式，改用语义化 class（如
<button class="btn btn--primary"></button>） - 外链样式表按功能分层：重置（reset）、基础（base）、组件（components）、主题（theme）、覆盖（override）
- 利用 BEM 或类似命名规范，让选择器权重保持在较低且可控水平（尽量不用 ID 或多层嵌套）
- 用
data-属性配合属性选择器做状态控制（如[data-status="loading"]），比靠权重硬刚更清晰
基本上就这些。优先级不是玄学，是可预测的数值规则；层叠也不是随机，而是有严格顺序。理清它，样式冲突就从“玄学问题”变成“配置问题”。
