样式被覆盖、重置或未渲染是视觉失效主因：匹配成功不等于生效；styles面板中带删除线规则即被更高权重覆盖；需检查加载顺序、reset重置、继承限制、作用域隔离、媒体查询条件及伪类激活状态。
不是没匹配，是样式被覆盖、被重置、或根本没机会渲染——匹配成功 ≠ 视觉生效。
Styles 面板里规则带删除线（overridden）
这是最常见也最容易误判的情况：选择器确实命中了元素，但同名属性被另一条更高权重的规则覆盖。DevTools 不会报错，只把你的声明灰掉并标上 overridden。
- 点开被划掉的规则，往上翻，看是谁赢了——可能是
#header .nav a压过了你写的.nav-link -
!important也救不了被内联样式style="color: red"覆盖的情况 - 后加载的 CSS 同权重下会覆盖前一条，检查
<link>或<style></style>的顺序 - 某些 reset 库（如 Bootstrap 的
button { all: unset; }）会清掉你后续所有声明，得手动重设
属性本身不可继承或已被父级重置
即使规则“胜出”，也不代表你能看到效果。有些 CSS 属性天生不向下传递，有些则被祖先节点悄悄覆盖。
-
margin、padding、width、display不继承，给父元素设了，子元素不会自动获得 -
color和font-size可继承，但如果子元素写了color: inherit或initial，你的值就被抵消了 -
display: none会让元素脱离文档流，此时visibility: hidden或opacity: 0才是更安全的隐藏方式 - 伪类如
:hover在非悬停状态下本就不激活，Computed 面板里自然看不到；右键元素 → “Force element state” 可手动触发验证
样式被作用域隔离（scoped / Shadow DOM）
现代框架和 Web Components 默认启用样式封装，外部写的规则根本进不去目标区域。
- Vue 的
<style scoped></style>会给选择器自动加哈希属性，比如.btn[data-v-12345]，全局写.btn不生效 - React 的 CSS Modules 类名会被哈希重命名（
styles.button → Button_button__xYz12），HTML 中直接写class="button"没用 - Shadow DOM 内部元素不受外部 CSS 影响，必须用
:host .item或::slotted(.item) - Chrome 扩展或 iframe 页面中注入的样式，作用域天然受限，需显式穿透或改用
shadowRoot操作
媒体查询或条件未满足
规则存在且选择器匹配，但包裹它的 @media 或 @supports 根本没触发，整块 CSS 就像不存在一样。
-
@media (min-width: 768px)在手机宽度下完全不解析，Styles 面板里这条规则甚至不会出现在匹配列表中 -
@supports (display: grid)在不支持 Grid 的旧浏览器里整块被跳过 - 漏闭合
@media块（比如少一个}）会导致其后所有规则静默失效 - 部分伪类在特定环境下受限：Chrome 对
::placeholder和状态伪类链式组合（如input:enabled::placeholder）支持不稳定，Safari 15.4 之前不生效
真正难排查的，往往是那些“看起来生效了”的情况：比如 fieldset[disabled] 下的 input 仍匹配 :enabled，但视觉上完全禁用；或者框架劫持了原生 disabled 属性却没同步到 DOM，导致 CSS 状态判断失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
