受子元素影响的段落文本CSS？

Question

有人可以向我解释为什么<div>会以某种方式影响包含它的<p>的CSS吗？

<style>p { font-family: Arial }</style>
...
<p>some text</p>
<p><div></div>some text</p>
<p>some text</p>

在此示例中，第二段中的字体将更改为浏览器的默认字体。这是为什么？

Answer 1

通过在段落标记中添加div，您就会破坏HTML。你最终会得到类似的东西：

<p>some text</p>
<p></p><div></div>some text<p></p>
<p>some text</p>

所以你的字体没有应用。

段落标记只能包含phrasing-content。如果您需要在段落标记中包装文本，请考虑使用<span>标记。

Answer 2

@Adrift是对的，你不能在文本标签中嵌套块级元素。这就像是说“这句话里面有一篇文章”，而不是“本文中有一句话”。这是因为块级元素强制在它们之前和之后断行。

如果你没有使用CSS重置方法，比如重置样式表或Normalize.css，那么奇怪的样式可能是由浏览器的用户代理样式表引起的（浏览器在没有其他任何东西时使用的默认样式）