CSS子组合器（>）意外选中嵌套p元素的问题咨询

你以为的DOM结构是嵌套<p>，但实际上**<p>元素不能包含其他块级元素（包括<p>本身）**，HTML规范里<p>属于段落类的流内容，不允许嵌套同类型的块级元素。浏览器遇到这种非法嵌套时，会自动修正DOM结构，把内部的<p>P#2...</p>从父<p>里“剥离”出来，变成<div>的直接子元素。

修正后的实际DOM结构大概是这样：

<div>
  <p>P#1, in the div.</p>
  <p>P#2, in the P that's in the div.</p>
</div>

这时候div > p自然会选中这两个<p>，给它们都加上黄色背景——因为现在两个<p>都是<div>的直接子元素了。

怎么解决？ #

不要嵌套<p>标签，根据需求选择以下两种方案：

• 方案1：用<span>代替嵌套<p>（适合段落内的行内嵌套内容）

<div>
  <p>
    P#1, in the div.
    <span>P#2, in the span that's in the p.</span>
  </p>
</div>

此时div > p只会选中外层的<p>，内层<span>不受该选择器影响。

• 方案2：用<div>拆分结构（如果本来就是两个独立段落）

<div>
  <p>P#1, in the div.</p>
  <p>P#2, in the div directly.</p>
</div>

直接将两个段落分开写，完全符合HTML规范，也能精准控制样式。

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