css - 在 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()之后才有效。