为何article标签不能作为p标签子元素？CSS:first-child选择器问题解惑

1. 为什么<article>不能作为<p>的子元素？ #

HTML规范中，<p>标签的内容模型仅允许短语内容（Phrasing Content），比如文本、<span>、<img>这类行内/短语级元素；而<article>属于流内容（Flow Content），是块级元素范畴，不符合<p>的内容要求。

浏览器遇到这种非法嵌套时，会自动执行纠错行为：立即闭合当前的<p>标签，把<article>放到<p>的外部。也就是说你写的<p><article>...</article></p>，实际渲染后的DOM结构会变成：

<p></p>
<article>...</article>

2. :first-child选择器未生效的原因 #

结合你描述的现象（序号“1”变蓝，<p>内<article>的序号“2”无样式），还原你的代码场景及问题根源：

你的代码（推测） #

HTML：

<article>1</article>
<p>
  <article>2</article>
</p>

CSS：

article:first-child {
  color: blue;
}

问题本质 #

如第一点所说，浏览器会自动修正非法嵌套的DOM结构，最终实际的DOM是：

<article>1</article>
<p></p>
<article>2</article>

此时第二个<article>是<body>的子元素，但它是<body>的第二个子元素（第一个是第一个<article>），并不满足:first-child的匹配条件（必须是父元素的第一个子元素），所以不会被选中。

如果你的CSS是针对<p>内的<article>写的p article:first-child，同样因为<article>已经被移到<p>外部，这个选择器根本找不到目标元素，自然不会生效。

内容的提问来源于stack exchange，提问作者Normed