html - 如何分隔具有类的列表元素？

Question

给定这样的元素列表：

<ul>
  <li class="favourite"></li>
  <li class="favourite"></li>
  <li class="favourite"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

我想在有.favourite和没有的列表元素之间创建一个差距。

有没有办法用 CSS 做到这一点？

编辑
假设具有类的元素.favourite总是被强制到列表的顶部。

Answer 1

您可以对 a lithat's not应用边距.favourite，它紧跟在 a 之后li.favourite。您将需要:not()与相邻的兄弟选择器一起使用，如下所示：

li.favourite + li:not(.favourite) {
    margin-top: 1em;
}

如果在您的实际标记中不知道是无类元素在前还是li.favourite元素在前，并且您想创建一个不考虑顺序的间隙，请像这样扩展选择器以涵盖这两种情况：

li.favourite + li:not(.favourite), li:not(.favourite) + li.favourite {
    margin-top: 1em;
}

如果您的列表从左到右水平流动，请使用左边距而不是上边距。