样式被覆盖即选择器匹配但权重不足，devtools styles面板中带删除线的规则表明被更高权重规则覆盖，需通过提升特异性、调整加载顺序或作用域隔离解决。
选择器匹配了但样式被覆盖（overridden）
DevTools 的 Styles 面板里能看到你的规则，但属性值是灰色、带删除线，旁边标着 overridden——说明它被另一条更高权重的规则赢了。这不是“没匹配”，而是“输了”。
-
#header .nav a比.nav-link权重高得多（前者含 ID，后者只有类） - 内联样式
style="color: red"几乎总是胜出，!important也压不过它 - 后加载的 CSS 同权重下会覆盖前面的，检查
<link>或<style></style>的引入顺序 - 某些 reset 或框架样式（如 Bootstrap 的
button { all: unset; }）会清掉你后续声明的大部分属性
选择器匹配了但属性本身不可继承或被重置
即使规则生效，也不代表所有属性都会如预期渲染。有些属性天生不继承，有些则被父级或浏览器默认样式悄悄重置。
-
margin、padding、width、display不继承，给父元素设了不会传给子元素 -
color和font-size可继承，但若子元素自己写了color: inherit或initial，就可能抵消你设的值 - 伪类如
:hover在非悬停状态下本就不激活，Computed 面板里自然看不到效果；右键元素 → “Force element state” 可手动触发验证 -
display: none会让元素脱离文档流，此时visibility: hidden或opacity: 0才是更安全的隐藏方式
样式被作用域隔离（scoped / Shadow DOM）
现代框架和 Web Components 默认启用样式封装，外部写的 .btn 根本进不去组件内部。
- Vue 的
<style scoped></style>会给选择器自动加属性哈希（如.btn[data-v-12345]），全局写.btn不生效 - React 的 CSS Modules 类名会被哈希重命名（
styles.button→Button_button__xYz12），直接写.button在 HTML 中无效 - Shadow DOM 内部元素不受外部 CSS 影响，必须用
:host .item或::slotted(.item) - Chrome 扩展或 iframe 页面中注入的样式，作用域天然受限，需显式穿透或改用
shadowRoot操作
媒体查询或条件未满足
规则存在且匹配，但包裹它的 @media 或 @supports 条件根本没触发。
-
@media (min-width: 768px)在手机宽度下完全不解析，Styles 面板里这条规则甚至不会出现在匹配列表中 -
@supports (display: grid)在不支持 Grid 的旧浏览器里整块被跳过 - 漏闭合
@media块（比如少一个}）会导致其后所有规则静默失效，W3C Validator 能快速揪出这类语法断点 - 部分伪类在特定环境下受限：Chrome 对
a:visited只允许修改color、background-color等极少数属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
