局部组件样式被全局覆盖源于CSS优先级和作用域规则，并非局部必然优先；需理解style默认全局、提升选择器权重、慎用!important，推荐CSS Modules或CSS-in-JS实现真正隔离。
局部组件样式被全局样式覆盖，核心原因是 CSS 优先级（specificity）和作用域规则导致的，并非“局部一定优先”。解决的关键是理解 style 的实际作用范围、提升局部样式的权重，以及谨慎使用 !important。
组件内 <style></style> 默认仍是全局的（除非启用 scoped）
在 Vue、React（CSS-in-JS 除外）、或纯 HTML 中，写在组件文件里的 <style></style> 标签默认不自动隔离——浏览器把它当作普通全局样式处理，只是位置靠后而已。它不会天然“局部化”。
- Vue 单文件组件需显式加
scoped属性：<style scoped></style>，Vue 才会通过属性选择器（如data-v-f3f2d1e4）为样式添加作用域标识 - React 中的
<style></style>标签（尤其在index.html或组件内用dangerouslySetInnerHTML插入）完全无作用域，等同于全局 style - 纯 HTML + CSS：所有
<style></style>都是全局生效，顺序靠后仅影响层叠（cascade），不改变作用域
优先级不够时，比拼的是选择器权重，不是“局部 vs 全局”
CSS 不看你是哪来的样式，只看选择器的 specificity（内联 > ID > 类/属性/伪类 > 标签/伪元素）。一个强全局选择器（如 #header .nav-item.active）很容易压过弱局部选择器（如 .btn）。
- 检查浏览器开发者工具中被划掉的样式，看右侧显示的 specificity 值（如 0,1,1,1）
- 局部样式想赢，就升级选择器：从
.card改成.my-component .card或div.card（增加标签层级） - 避免滥用
!important来补救低权重，应先优化选择器结构
!important 是“强制覆盖”，但有代价
!important 会让该声明无视优先级规则，直接胜出——但它不解决根本问题，还会让后续维护困难。
立即学习“前端免费学习笔记（深入）”；
- 单个属性加：
color: red !important; - 它只对当前声明生效，不影响其他属性；也不能跨规则继承
- 多个
!important同时存在时，仍按优先级和顺序决定谁最终生效 - 慎用场景：第三方库样式强且无法修改、临时调试、CSS-in-JS 中封装后的兜底策略
- 禁用场景：团队协作项目初期、可预测的选择器能解决的问题、所有样式都加
!important
更健壮的替代方案（推荐优先尝试）
比起硬刚优先级，用现代方式从源头控制样式影响范围更可持续。
- 启用 CSS Modules（React/Vue/webpack）：类名自动哈希，天然隔离，如
button__primary_abc123 - 使用 CSS-in-JS 库（如 styled-components、emotion）：样式与组件绑定，支持动态 props 和真正作用域
- 善用
:where()或:is()降低权重干扰（适合重置或基础样式） - 把全局样式收敛到基础层（reset、typography、layout），业务组件样式专注自身逻辑，减少冲突面
基本上就这些。局部样式盖不住全局，不是 bug，是 CSS 规则在诚实工作。看清作用域边界、算清选择器权重、留好 !important 的退路——不复杂但容易忽略。
