如何使用相邻的兄弟组合器？

Question

我们正在尝试控制内容的垂直间距，让所有内容都运行良好，除非内容跟在div之后 - 请考虑以下内容：

<div>
  <ul>
    <li></li>
  </ul>
</div>

我们想要删除紧跟div之后的所有ul的上边距，所以一直在尝试：

div + ul {
  margin-top: 0;
}

这是否适用于此选择器？

我们似乎无法让它发挥作用 - 任何指向正确方向的人都会非常感激。

干杯

本

Answer 1

它有＆＃34;相邻＆＃34;在其中，这意味着＆＃34;在＆＃34;旁边：ul不在＆＃34;旁边＆＃34;您的div（在同一层级），但在内。

你想要的是一个直接（非递归）子选择器，>所以：

div > ul { ... }

如果只发生在div的第一个孩子身上：

div > ul:first-child { ... }