0

このような要素のリストを考えると：

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

持っているリスト要素と持っていないリスト要素の間にギャップを作りたいと思い.favouriteます。

CSSでこれを行う方法はありますか？

編集クラスを持つ要素は常にリストの一番上に強制される
と想定します。.favourite

4

1 に答える 1

4

の直後にある、ではliないにマージンを適用できます。次のように、隣接する兄弟セレクターと組み合わせて使用​​する必要があります。.favouriteli.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;
}

リストが左から右に水平に流れる場合は、上マージンではなく左マージンを使用してください。

于 2012-05-06T07:07:35.583 に答える