继承属性不参与层叠权重计算，其值无选择器权重；显式声明无论多弱均覆盖继承值；inherit是真实声明，具对应选择器权重；非继承属性必须显式设置或用inherit才能生效。
继承属性在选择器中“不参与权重竞争”
继承来的值根本不算一条独立声明，它没有选择器权重。比如父元素写 .card { color: red; }，子元素没写任何 color，那它显示红色不是因为“继承规则赢了”，而是因为压根没触发层叠计算——浏览器直接用父级算好的值填进去。你在 DevTools 里看到的 “Inherited from .card” 是灰色的，说明它连参与比较的资格都没有。
这意味着：哪怕你给子元素写一个极低权重的选择器，比如 p { color: blue; }（权重 0,0,0,1），也会立刻覆盖继承值。因为继承值不占位，而这条声明是真实存在的、可参与层叠的。
- 继承值不会被
!important影响（它本身就不在层叠队列里） - 子元素只要出现任意一条显式设置
color的规则，无论多弱，都会打断继承 -
inherit关键字是例外——它是一条真实声明，有对应选择器权重
非继承属性必须靠选择器“抢到”才能生效
像 margin、padding、background-color 这类属性，父元素设了再高权重也传不下去。子元素想用同样的值，只有两条路：要么自己写一遍（带选择器），要么显式写 margin: inherit。
而 inherit 是真正在参与层叠的——它的权重完全取决于所在选择器。比如：
.card p { margin: inherit; }
这行的权重是 0,0,1,1，和 .card p { margin: 16px; } 是同一量级，会被更高权重的规则覆盖。
- 别指望
div { padding: 20px; }让所有后代button都带上内边距——它们默认用padding: initial（通常是 0） -
inherit不解决优先级问题，只解决“值来源”，该被覆盖照样被覆盖 - 表单控件（
input、select）对多数字体/颜色属性也表现得像非继承元素，得手动加font-family: inherit
为什么 color 看似继承却经常“失效”
不是继承坏了，是它太容易被其他规则挤掉。常见干扰源：
- 浏览器默认样式：比如
h1自带color: -webkit-link（深蓝），会盖过从body继承的color: #333 - 内联样式：
<p style="color: black"></p>权重 1000，继承值毫无还手之力 - ID 选择器：哪怕只用一次
#sidebar p { color: gray; }，权重 0,1,0,1 就足以压倒所有继承链 - 伪类：
a:hover { color: red; }在悬停时直接接管，继承值彻底退出
查这个问题，先打开 DevTools，看子元素的 color 值旁边有没有灰色的 “Inherited from …”。有，说明继承成功；没看到，说明已经被某条显式规则截胡了。
真正影响选择器设计的其实是“继承边界”
继承不是无限向下穿透的。遇到 display: none、visibility: hidden 的祖先，继承就断了；遇到某些 UA 样式强制重置的元素（如 button 的 font），也会局部中断。更隐蔽的是伪元素：::before 能继承 color，但不能继承 margin，哪怕你写了 margin: inherit，浏览器也会报无效声明。
所以写选择器时，别假设“父元素设了就能用”。对关键视觉属性（尤其是 font-family、line-height、color），在组件根节点上显式声明比依赖继承更稳；对布局属性（margin、padding），压根别指望继承，老老实实写清楚作用域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
