Bob*_*ith 3 html css inheritance
我一直在阅读很多关于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的东西？我在这里错过了什么？您是否有在线参考对继承的非常详尽的解释？我见过的所有东西(我已经看了很长时间)只是解释了像"One"这样的例子,但没有解决像"Two"这样的问题.
我知道有很多(更好的)方法可以获得我在这里要求的相同视觉效果.但是这个例子是关于我试图理解一般的继承,而不是试图对这个HTML代码产生任何特殊的影响.
非常感谢你的帮助!
一个<div>内<p>标签是无效的HTML.如果检查呈现的HTML,它可能看起来像这样:
<p class="anc"></p>
<div class="dec">TWO</div>
<p></p>
浏览器修复了无效的嵌套,但这会破坏您的CSS定义.
你不能在块内部嵌套块级元素<p>- 开口<p>最终作为一个自闭元素,并将后代div <p>作为后续兄弟推出.该段还在div <p> 之后创建一个空; 结构最终看起来像:
<p class="anc"> </p>
<div class="des">Two</div>
<p></p>