如何分离列表中具有类的元素？

Question

给出这样的元素列表：

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

我想在具有.favourite的列表元素与不具有.favourite的列表元素之间创建间隙。

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

修改
假设具有类{{1}}的元素总是被强制到列表的顶部。

Answer 1

您可以在li之后的.favourite 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;
}

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