受子元素影响的段落文本 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>

因此，您的字体未应用。

段落标签只能包含措辞内容。如果需要在段落标签内自动换行，请考虑使用 <span> 标签。

Answer 2

@Adrift是正确的，你不能在文本标签中嵌套块级元素。这就像说"这句话里有一篇文章"，而不是"这篇文章里有一句话"。这是因为块级元素在自身之前和之后强制换行。

如果您没有使用 CSS 重置方法，例如重置样式表或 Normalize.css，则奇怪的样式可能是由浏览器的用户代理样式表（浏览器在没有其他任何内容时使用的默认样式）引起的。