Question

我一直在阅读很多关于CSS继承的内容，但我一直无法找到关于这个问题的任何内容，我很困惑。请考虑以下事项：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.anc {
  background-color: blue;
  color: red;
}
.des {
  background-color: inherit;
  color: inherit;
}
</style>
</head>
<body>

<div class="anc">
  <p class="des">
    One <!-- Blue background, red text. Clearly inheritance. -->
  </p>
</div>

<p class="anc">
  <div class="des">
    Two <!-- Why is nothing inherited here? -->
  </div>
</p>
</body>
</html>

“One”文本正如我所料。但我不明白为什么“两个”文本也没有蓝色背景和红色文本。

是否有一些关于块元素继承的特殊规则而不是内联元素？还是特别关于div的东西？我在这里错过了什么？您是否有在线参考对继承的非常详尽的解释？我见过的所有东西（我已经看了很长时间）只是解释了像“一个”这样的例子，但没有解决像“两个”这样的问题。

我知道有很多（更好的）方法可以获得我在这里要求的相同视觉效果。但是这个例子是关于我试图理解一般的继承，而不是试图对这个HTML代码产生任何特殊的影响。

非常感谢你的帮助！

Answer 1

<div>标记内的<p>无效HTML。如果检查呈现的HTML，它可能看起来像这样：

<p class="anc"></p>
<div class="dec">TWO</div>
<p></p>

浏览器修复了无效的嵌套，但这会破坏您的CSS定义。

Answer 2

你不能在<p>中嵌套块级元素 - 开头<p>最终作为一个自闭元素并将后代div从<p>推出为一个成功的兄弟姐妹。该段落在 div之后还会创建一个空的<p> ;结构最终看起来像：

<p class="anc"> </p> <div class="des">Two</div> <p></p>

Answer 3

<p>只能包含内联元素。将<div>放入<p>。

是无效的

Answer 4

您在第二种情况下交换了<div>和<p>。此外，您的css指定.des，而您在HTML中的类名称为dec请参阅工作jsFiddle here。

<div class="anc">
  <p class="dec">
    One <!-- Blue background, red text. Clearly inheritance. -->
  </p>
</div>

<div class="anc">
  <p class="dec">
    Two <!-- Why is nothing inherited here? -->
  </p>
</div>

.anc {
  background-color: blue;
  color: red;
}

此外，不需要inherit，因为子项将在父项中呈现，您已设置其样式。

涉及div的CSS继承

4 个答案: