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

您可以对不是 .favourite 的 li 应用边距，它紧跟在 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;
}

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