HTML标签本身不继承属性,CSS继承仅限color、font-family、font-size、line-height、text-align、visibility、cursor等文本与交互属性;margin、padding、border、background、display等布局属性不可继承,且继承依赖真实DOM祖先链与规范定义。

HTML 标签本身不继承任何属性,所谓“继承”全是 CSS 的事——浏览器只按规范把特定 CSS 属性沿 DOM 祖先链往下传,和 HTML 标签名、class、id 无关。
哪些 CSS 属性真的会继承
浏览器硬编码了可继承列表,不是“看起来像就传”,而是严格按规范走。查 MDN 某属性页的 Inherited 字段最准。
-
color、font-family、font-size、line-height、text-align、visibility、cursor这些基本都继承 -
margin、padding、border、background、width、height、display、position全都不继承——写了也白写 -
list-style-type只在ul→li或ol→li这种语义链中生效;换成div > span就断了
为什么 <p><div>xxx</div></p> 看似没继承
这不是继承失效,是 HTML 结构非法导致 DOM 被浏览器自动修正。规范禁止 p 直接包含块级元素,所以实际解析后 div 被提到 p 外层,继承链物理断裂。
- 用开发者工具的 Elements 面板看真实 DOM 树,比盯源码更可靠
-
p > strong、p > em、p > span这类合法嵌套,字体/颜色照常下传 - 想验证继承是否发生?删掉父元素的样式声明,子元素如果还带样式,说明是选择器匹配(比如
.parent p)而非继承
inherit、unset、initial 到底怎么选
这三个不是“开关继承”,而是单属性值重置,行为高度依赖上下文。
立即学习“前端免费学习笔记(深入)”;
- 想明确延续父级
color?直接写color: inherit,安全无歧义 -
unset对可继承属性等价于inherit,对不可继承属性才等价于initial;父级设了color: red,子元素写color: unset,结果仍是红色 -
display: contents、Shadow DOM 边界、iframe都会切断继承链——调样式前先确认节点真实父子关系
最容易被忽略的一点:继承只发生在可继承属性 + 真实祖先路径同时满足时。DOM 结构错位、伪元素、替换元素(如 img、input)都是常见断点,别急着改 CSS,先看 Elements 面板里的树长什么样。



















