html - CSS 选择器未按预期运行

Question

在下面的简单文档中:

div+p {
  color: red;
}

<div>
  <p>Hi Caitlin! Welcome to CSS!</p>
</div>

尽管是 div 元素的子元素，但“p”(段落)标签之间的文本未显示为红色。 “~”选择器也不起作用，但“>”按预期执行。我在 Windows 机器上使用 Chrome 49。

Answer 1

+是相邻的 sibling 组合子。

div和 p具有父/子关系( > 是子组合子，而空格是后代组合子)而不是 sibling 关系(即 <div></div><p></p> )。