伪选择器:最后一个子项不工作

Question

我在 Bootstrap 4 中使用导航栏，我不知道如何将border-right应用于除最后一项之外的nav-link。

这是我的 HTML：

<nav class="navbar navbar-toggleable-md navbar-light bg-transparent">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</li>
</ul>
</div>
</nav>

和 SCSS：

.navbar {
.navbar-nav {
.nav-link {
border-right:1px solid red;
&:last-child {
border-right:none;
}
}
}
}

我不知道为什么，但此示例从nav-link中删除所有边框，而不是最后一个边框。

我想在没有 javascript 或特定类的情况下实现这一目标！谢谢。

Answer 1

所有nav-link都是父元素的最后一个子元素。试试这个。也不是说它不必这么具体，但我认为你知道特异性，所以我会保持原样。

.navbar {
.navbar-nav {
.nav-link {
border-right:1px solid red;
}
li {
&:last-of-type {
.nav-link {
border-right:none;
}
}
}
}
}

请注意，您有一个杂散的结束li元素。

Answer 2

:last-child应该以nav-item而不是

更改代码 SCSS 变为：

.navbar {
.navbar-nav {
.nav-link {
border-right:1px solid red;
}
.nav-item {
&:last-child {
.nav-link {
border-right:none;
}
}
}
}
}