3

私はこのようなブレッドクラムを開発しています：

<div class="breadcrumb">
  <ul>
    <li><a href="behandelingen.html">Behandelingen</a></li>
    <li><a href="behandelingen-cat.html">Gelaatsverzorgingen</a></li>
    <li class="active">Environ Discovery</li>
 </div>

Sass を使用してブレッドクラムをスタイリングしています。

.breadcrumb {
  @include outer-container;
  @include shift(4);
  margin-top: em(50);
  padding-left: em(14);
  li {
    float: left;
    margin-right: 15px;
  }
}

すべてのリスト項目の後に ">>" を追加するために、li 定義内にこれを追加しました。

&:after{
  content: ">>";
  margin-left: 10px;
}

これは問題なく動作しますが、最後のリスト項目に ">>" を追加しないように定義するルールを追加したいと考えています。私はこれを試しました：

&:after:not(li:last) {
  content: ">>";
  margin-left: 10px;
}

しかし、それはすべての ">>" を非表示にします。

最後の項目を除いて、すべてのリスト項目の後に ">>" を追加する方法を教えてもらえますか?

4

1 に答える 1

14

代わり:not(:last-child)に:

&:not(:last-child):after {
  content: ">>";
  margin-left: 10px;
}

:lastは有効な CSS セレクターではなく、 内に複数の単純なセレクターを持つことはできません:not()。liネストされたセレクターは既に を使用しているため、この部分は省略できますli。

:afterは疑似要素である:not()ため、有効にするためには後に配置する必要もあります。

于 2014-03-29T11:01:55.973 に答える