如何使用相邻的兄弟组合器？ [复制]

Question

我们正在尝试控制内容的垂直间距，并让一切正常运行，除非内容跟随 div - 请考虑以下事项：

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

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

div + ul {
  margin-top: 0;
}

这是该选择器的正确用途吗？

我们似乎无法让它发挥作用 - 任何指向正确方向的指针都将不胜感激。

干杯

本

Answer 1

其中有“相邻”一词，意思是“旁边”：您的ul 不是“旁边”您的div（在同一层级上）而是在里面它。

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

div > ul { ... }

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

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