在li之后添加>>,除了最后一个li

Question

我正在开发像这样的面包屑:

<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;
}

但这使得所有">>"都消失了.

有人可以告诉我如何在每个列表项后添加">>",除了最后一个？

Answer 1

你想要的是:not(:last-child):

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

:last不是有效的CSS选择器,并且您不能在其中包含多个简单选择器:not().li由于嵌套选择器已经使用,因此可以省略该部分li.

:after作为一个伪元素,也需要放在:not()它之后才能生效.