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

添加＆＃34;＆gt;＆gt;＆＃34;在每个列表项之后，我在我的li定义中添加了这个：

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

这很好用，但现在我想添加一个规则，定义不添加＆＃34;＆gt;＆gt;＆＃34;到最后一个列表项。我试过这个：

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

但这使得所有＆＃34;＆gt;＆gt;＆＃34;消失。

有人可以告诉我如何添加＆＃34;＆gt;＆gt;＆＃34;在每个列表项之后，除了最后一个？

Answer 1

您想要:not(:last-child)代替：

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

:last不是有效的CSS选择器，并且:not()中不能有多个简单选择器。由于您的嵌套选择器已使用li。

，因此可以省略li部分作为伪元素的

:after也需要放在:not()之后才能生效。

添加＆gt;＆gt;在李之后，除了最后一个李

1 个答案: