受子元素影响的段落文本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，则奇怪的样式可能是由浏览器的用户代理样式表（默认样式浏览器在没有任何其他情况下使用）导致的。