CSS继承机制中，哪些选择器下的属性能被其他元素继承？

本文共计1088个文字，预计阅读时间需要5分钟。

CSS属性并非都会向子元素递归传递，只有明确被定义为可继承的属性才会。例如：

关键判断依据是 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 阶段的样式树中，调试时得靠“检查父元素该属性是否生效”来反推。