3

我一直在阅读很多关于 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”文本按我的预期工作。但我不明白为什么“Two”文本没有蓝色背景和红色文本。

与内联元素相比，块元素的继承是否有一些特殊规则？还是关于 div 的特别之处？我在这里想念什么？您是否有在线参考对继承的非常透彻的解释？我所看到的一切（而且我已经看了很长时间）只是解释了像“一”这样的例子，但没有解决像“二”这样的问题。

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

非常感谢你的帮助！

4

4 回答 4

5

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

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

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

于 2013-09-18T23:02:06.407 回答
5

您不能在 a 内嵌套块级元素<p>- 开口<p>最终充当自闭合元素并将后代 div<p>作为后续兄弟元素推出。该段落还在div<p> 之后创建一个空；结构最终看起来像：

<p class="anc"> </p>
    <div class="des">Two</div>
<p></p>
于 2013-09-18T23:02:15.040 回答
1

A<p>只能包含内联元素。将 a 放入 a 是无效<div>的<p>。

于 2013-09-18T23:01:59.773 回答
0

在第二种情况下，您交换了<div>和。<p>您的 css 还指定.des，而您在 HTML 中的类名是decSee working 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因为子级将在您已经设置的样式的父级中呈现。

于 2013-09-18T23:04:08.967 回答