根本原因是目标元素实际DOM结构不同，如子选择器因嵌套层级变化而失效；应使用开发者工具检查真实结构、避免过度依赖层级选择器、排查优先级冲突、注意伪类触发条件、显式重置继承属性、确保CSS变量作用域正确。
为什么 body 里加的样式在某些页面没生效
根本原因不是 CSS 写错了，而是目标元素实际 DOM 结构不同——比如你以为 .btn 是直接子元素，结果某页里它被套了三层 div，而你用了 .container > .btn 这种子选择器，自然失效。
实操建议：
- 用浏览器开发者工具（F12）逐层点开目标元素，看真实父级路径，别信模板命名或文档描述
- 避免过度依赖层级选择器，
.btn比section > article > .content > .btn更可靠 - 检查是否被更高优先级规则覆盖：右键「检查元素」→ 看「Computed」面板里该属性是否被划掉，点击右侧来源可跳转到冲突规则
伪类和伪元素在不同页面表现不一致
:hover、::before 看似通用，但实际依赖宿主元素是否满足条件。例如某页按钮是 <button></button>，另一页是 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn"></a>，而你写了 button:hover { ... }，后者就完全不触发。
常见问题：
立即学习“前端免费学习笔记（深入）”；
-
a:hover默认带下划线，但button:hover不会，混用时视觉突兀 -
::before要求元素有内容或设置content: ""才渲染，空<span class="icon"></span>若没写content就啥也不显示 - 移动端 Safari 对
:active支持弱，常需加cursor: pointer或绑定空ontouchstart才激活
继承与初始值导致的隐性差异
CSS 属性分可继承（如 color、font-size）和不可继承（如 border、margin）。同一 .title 类，在 A 页面父容器设了 font-size: 14px，B 页面父容器是 font-size: 18px，那 .title 的最终字号就不同——哪怕你没显式写 font-size。
排查方法：
- 在「Computed」面板中搜索
font-size，看「actual value」和「source」，确认是继承值还是自身声明值 - 对关键排版属性（
line-height、color、font-family）显式重置，避免跨页面漂移 - 慎用
unset或revert，它们行为依赖浏览器默认样式表，各框架/主题可能不同
自定义属性（CSS 变量）作用域未对齐
--primary-color 在根节点定义，但某页面组件被包裹在 Shadow DOM 或 Vue/React 的 scoped style 中，变量就访问不到；或者变量名拼错（--primay-color），降级为默认值，而该默认值在不同页面由不同基础 CSS 提供。
关键细节：
- 变量必须在使用前声明，且作用域包含调用位置；
:root { --c: red; }有效，但.page-a { --c: red; }下的.page-b .item { color: var(--c); }拿不到 - 变量值若含单位（如
--gap: 1rem;），不能和无单位值混用：margin: var(--gap) 0;可行，但width: calc(100% - var(--gap));要确保--gap本身带单位 - 构建工具（如 PostCSS）若开启 CSS 变量转义，可能把变量编译成静态值，导致多主题切换失效
结构差异不是 bug，是 CSS 天然的工作方式。最省事的解法永远是：打开 F12，看真实 DOM，再看真实计算值——别猜，直接看。
