无法删除最后一个孩子的 CSS 边框

Question

我无法删除 li 之后最后一个孩子的边框。最后一个孩子之后就不工作了。让我知道如何解决此问题。

.main-menu__link {
font-size: 15px;
background: #fff;
color: #f37321;
&::after {
border-right:#522e91 1px solid;
height: 14px;
content: " ";
padding-left: 15px;
&:last-child() {
border-right: none;
}
}
<ul class="main-menu">
<li class="main-menu__item"><a class="main-menu__link" href="#">PRESS RELEASE</a></li>
<li class="main-menu__item"><a class="main-menu__link" href="#">REQUEST A REP</a></li>
<li class="main-menu__item"><a class="main-menu__link" href="#">PRESCRIBING INFORMATION </a></li>
</ul>

Answer 1

您正在main-menu__item中选择main-menu__link的最后一个子项，即其自身。 您必须先选择main-menu__item的最后一个子项。

将此添加到您的样式中：

.main-menu__item {
&:last-child {
.main-menu__link {
&::after {
border: none;
}
}
}
}