受子元素影響的段落文本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，則奇怪的樣式可能是由瀏覽器的用戶代理樣式表（默認樣式瀏覽器在沒有任何其他情況下使用）導致的。