兄弟选择器选择子元素？ [复制]答案

【问题标题】：Sibling Selector Selecting child elements? [duplicate]兄弟选择器选择子元素？ [复制]
【发布时间】：2022-01-10 19:24:16
【问题描述】：

<p>hello
    <div>test</div>
</p>

<div>yo
    <p>hi</p>
</div>

<p>hello</p>

我有以下代码，当我使用以下样式时，我得到以下内容。

p + div {
    color:orange;
}

它对 p 内的 div 进行样式设置，我认为它只应该在同一级别之后立即设置兄弟姐妹的样式？奇怪的是，如果我执行以下操作

div + p {
     color:orange;
}

它不会如图所示设置 div 标签内的 p 样式。

有人知道怎么回事吗？

【问题讨论】：

div 中的 p 继承了您在第一个示例中设置样式的父 div 的黄色，在第二个示例中，您只有紧跟 div 的最后一个 p，这就是为什么只有那个一个是风格。（顺便说一句，您在 p 中的 div 是无效的 html）
@pete 其实旁白解释了实际原因。

【解决方案1】：

您的 HTML 标记无效。 <div> 不能放置在 <p> 中，因此浏览器修复通过更改此标记：

<p>hello
  <div>test</div>
</p>
<div>yo
  <p>hi</p>
</div>
<p>hello</p>

...进入这个：

<p>hello</p>
<div>test</div>
<p></p>
<div>yo
  <p>hi</p>
</div>
<p>hello</p>

现在p + div 匹配test 和yo。而hi 继承了父级的颜色。

【讨论】：

【解决方案2】：

当您将 div 放入 p 标记时，您的代码已损坏。

所以

test

被认为与 p 相邻并应用橙色。

和

yo
hi

被认为与另一个 p 相邻并应用橙色。

为了更清楚，请参阅下面使用上述代码创建的 DOM 结构。

【讨论】：