color、font-family、line-height、font-size、visibility、cursor 等属性默认可继承，判断依据是规范中标注“inherited: yes”；inherit 关键字取父元素计算值，不开启继承机制；content 不可继承；自定义属性默认继承但延迟计算。
哪些 CSS 属性默认会继承？
不是所有 CSS 属性都会向下传递给子元素，只有明确被规范定义为「可继承」的属性才会。比如 color、font-family、line-height 会继承，但 border、margin、padding 绝对不继承。
关键判断依据是 MDN 或 CSS 规范里每个属性的「Initial value」下方是否写着 Inherited: yes。别凭感觉猜——很多看似“文字相关”的属性其实不继承，比如 text-align（它只影响块级容器内的行盒对齐，不是子元素继承来的）。
-
font-size继承，但计算值基于父元素的字体大小（可能触发相对单位链式计算） -
visibility继承，hidden会让子元素也隐藏，但子元素设visibility: visible可以覆盖 -
cursor继承，但pointer-events: none会切断鼠标行为，和继承无关
inherit 关键字不是“强制继承”，而是“显式取父值”
inherit 是一个特殊关键字，作用是让当前声明的属性值等于其父元素**计算后的值**，而不是“开启继承开关”。它在任何属性上都能用，哪怕该属性本来就不继承。
常见误用场景：有人以为给 div 设 border: inherit 就能让它继承父 div 的边框——实际不会，因为 border 本就不继承，而父元素的 border 计算值通常是 none，所以结果还是没边框。
立即学习“前端免费学习笔记（深入）”；
- 适合用
inherit的地方：统一图标颜色（color: inherit）、复用父级字体粗细（font-weight: inherit） - 慎用场景：布局类属性（
display、position），容易意外破坏结构 - 注意：如果父元素该属性是
unset或initial，inherit也会照搬过去
伪元素（::before/::after）不会自动继承父元素的 content 属性
content 属性本身不可继承，而且伪元素根本不会从父元素“拿到”这个值。即使你写了 content: inherit，浏览器也会忽略——因为 content 的初始值是 normal，而 normal 不是一个可继承的值。
这意味着：想让伪元素显示和父元素文本一致的内容，必须显式写死或用属性提取：
- 错误写法：
content: inherit（无效） - 可行写法：
content: attr(data-label)，前提是父元素有data-label="xxx" - 也可用 JS 动态注入，但纯 CSS 下无法“读取并复用父文本内容”
自定义属性（CSS Custom Properties）的继承行为很特别
--my-color 这类自定义属性默认就是可继承的，但它的“继承”只是把变量名和值一起传下去，**不触发计算**。子元素用 var(--my-color) 时，才在本地上下文中解析该变量值。
这导致一个易错点：如果父元素的 --my-color 依赖自身 color（比如 --my-color: currentColor），子元素 var(--my-color) 解析出的其实是**子元素自身的 color 值**，而非父元素的。
- 想锁定父级计算结果？得在父元素就展开成具体值，比如
--my-color: #333 - 用
inherit赋值给自定义属性（--x: inherit）是合法的，但意义有限——它继承的是父元素该变量的原始值，不是计算结果 - 注意兼容性：
var()在 IE 完全不支持，且不能用于@keyframes内部的属性名位置
继承不是样式“扩散”，而是特定属性在特定节点上的值获取策略。最常被忽略的是：继承值在 computed style 里看不出来——它只存在于 layout 阶段的样式树中，调试时得靠“检查父元素该属性是否生效”来反推。
