内联样式权重（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属性，用语义化类名替代，比如把
