内联样式权重（1000）高于外部样式，但可通过!important、JavaScript移除或避免使用内联样式来覆盖；外部样式按引入顺序后载者优先；调试时用开发者工具查看被划掉的规则及来源。
当CSS内联样式和外部样式表发生冲突时，浏览器会根据CSS特异性（权重）和声明顺序决定最终生效的样式。内联样式默认权重更高，但并非不可覆盖；外部样式只要权重足够或引入位置合理，依然可以生效。
理解CSS权重优先级
CSS样式的最终效果由选择器的特异性（specificity）决定，从高到低依次为：
-
内联样式（如
style="color: red;"）→ 权重值：1000 -
ID选择器（如
#header）→ 权重值：100 -
类、属性、伪类选择器（如
.btn、[type="text"]、:hover）→ 权重值：10 -
元素名、伪元素选择器（如
div、::before）→ 权重值：1
例如：div#main.content:hover 的权重是 1（div） + 100（#main） + 10（.content） + 10（:hover） = 121，仍低于内联样式的1000。所以仅靠增加选择器复杂度通常无法覆盖内联样式。
覆盖内联样式的可行方法
若需强制让外部样式生效，可采用以下方式（按推荐顺序）：
立即学习“前端免费学习笔记（深入）”；
-
使用
!important（谨慎使用）：在外部样式中添加!important可提升声明优先级，例如：color: blue !important;。注意它会破坏层叠逻辑，应仅用于第三方库干扰或紧急修复场景。 -
改用JavaScript动态移除或修改内联样式：通过
element.style.color = ''或element.removeAttribute('style')清空内联样式，再由外部CSS接管。 -
避免内联样式，统一交由CSS控制：在开发阶段就约定不写
style属性，用语义化类名替代，比如把<div style="display:none">改为<div class="is-hidden">，再在外部CSS中定义.is-hidden { display: none; }。
控制外部样式引入顺序
当多个外部样式表或
- 确保通用样式（如重置CSS、基础排版）在前引入，组件/页面专属样式在后引入。
- 将需要高优先级的定制样式放在
<head>中<link>的末尾，或使用<style>标签写在所有外部CSS之后。 - 注意：HTML中
<style>标签内的规则，其权重与外部CSS相同，仅靠顺序决定覆盖关系。
调试技巧：快速定位冲突来源
在浏览器开发者工具（F12）中：
- 选中元素，在“Styles”面板查看所有匹配的CSS规则，被划掉的即为被覆盖的样式。
- 每条规则旁会显示来源（如
inline:1、style.css:24），并标注是否含!important。 - 勾选/取消勾选某条规则，可实时验证效果，帮助判断是否为权重或顺序问题。
不复杂但容易忽略：多数样式冲突其实源于开发习惯——混合使用内联样式与外部CSS。统一管理样式来源，比反复用 !important 更可持续。
