同一 class 表现不同是因 css 层叠与继承导致样式被覆盖或受父级影响；应通过父级选择器限定作用域、提升特异性，避免全局污染，优先使用语义化容器类、bem 命名或 data 属性实现样式隔离。
同一 class 在不同位置表现不同，通常是因为 CSS 的层叠（cascade）和继承（inheritance）机制导致样式被其他规则覆盖或受父级上下文影响。解决的核心思路是：**用父级选择器明确限定作用域，提升特异性（specificity），避免全局污染**。
为什么同一 class 表现不一致？
常见原因包括：
- 外部样式表、组件库或重置 CSS（如 normalize.css）中已有同名 class 的定义，且其选择器权重更高
- 该 class 被嵌套在不同父容器中，而父级设置了 font-size、color、padding、display 等可继承或影响子元素的属性
- 使用了后代选择器（如
.container .btn）或通用重置（如* { box-sizing: border-box; }），间接改变了渲染效果 -
浏览器默认样式在不同上下文中触发条件不同（例如表单控件在
fieldset内行为有差异）
用父级选择器精准限定作用域
不依赖全局 class，而是结合其所在模块的唯一父容器来写规则，既安全又可维护：
- 给外层容器加语义化 class（如
header-section、product-card），再写.header-section .btn - 利用 BEM 命名法：把父块名作为前缀，如
header__title、card__title，天然隔离作用域 - 用 data 属性做轻量标记：
<div data-module="search"><span class="label">关键词</span></div>，对应 CSS：[data-module="search"] .label { font-weight: bold; }
避免过度依赖 !important 和内联样式
!important 会破坏可维护性，应仅用于覆盖第三方库且无法修改源码的极端情况。更推荐：
立即学习“前端免费学习笔记（深入）”；
- 检查 Chrome DevTools 的 Styles 面板，看哪条规则生效、为何被划掉
- 用更具体的选择器替代
!important，比如把.btn改成.nav-menu .btn或.btn.btn--primary - 将模块样式封装在
<style scoped></style>（Vue）或 CSS Modules 中，让构建工具自动添加哈希类名
小技巧：快速定位冲突来源
在浏览器开发者工具中：
- 右键元素 → “检查”，在 Styles 面板顶部勾选 “Show all” 查看所有匹配规则
- 点击右侧的文件名链接，跳转到对应 CSS 行，确认是否来自预期文件
- 临时禁用某条规则（点击左侧复选框），观察变化，快速验证是否为元凶
不复杂但容易忽略：样式问题往往不是 class 写错了，而是它“在哪被用”决定了它“怎么被算”。限定父级，就是给样式画个安全边界。
