如何使用相邻的兄弟组合子

Question

我们试图控制内容的垂直间距，并使所有内容都能正常工作，除非内容遵循div-请考虑以下内容：

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

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

div + ul {
  margin-top: 0;
}

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

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

干杯

Ben

Answer 1

它有一个单词"neighbor"，意思是"next to"：您的ul不是"挨着"div(在同一层次上(，而是在它内部。

您想要的是一个直接(非递归(子选择器>所以：

div > ul { ... }

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

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