继承在 CSS 中无法正常工作 [重复]

【问题标题】：Inheritance is not working correctly in CSS [duplicate]继承在 CSS 中无法正常工作 [重复]
【发布时间】：2021-11-21 12:03:36
【问题描述】：

这里是代码

body {
  color: purple;
}

p {
  color: blue;
}

<body>
    <p> 
        <h1>Hello</h1>
    </p>

    <h1>Hello</h1>
</body>

这里的问题是h1 没有继承元素p 的颜色，这是它最近的父元素。我读到如果没有给出color，那么它的默认值为inherit。所以，首先h1 应该是蓝色的。那么，这里发生了什么？

【问题讨论】：

标签： html css

【解决方案1】：

发生的事情是由 HTML 的问题引起的。

p 元素不能包含 h1 元素，因此系统在 h1 元素之前关闭了 p 元素。因此，h1 元素采用其最近的祖先的颜色，该祖先具有颜色集，在本例中为 body。

尝试使用合法的 HTML，将 p 替换为 div：

body {
  color: purple;
}

div {
  color: blue;
}

<body>
  <div>

    <h1>Hello</h1>
  </div>
</body>

【讨论】：

@user9026 您可能会发现这很有用：Is there a list of HTML5 elements that can be nested inside other elements?
@andrew-morton 谢谢。我不知道这是一种非法的 HTML 使用方式
当我在W3C Validation Service 站点中检查我的HTML 文件时，确实收到了错误No p element in scope but a p end tag seen。所以，你们是对的。再次感谢。