首页 > 解决方案 > 无法删除最后一个孩子的 CSS 边框

问题描述

之后我无法删除 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>

标签: csssass

解决方案


您正在选择main-menu__linka 内部的最后一个孩子main-menu__item,它就是它本身。您必须选择第一个的最后一个孩子main-menu__item

将此添加到您的样式中:

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

推荐阅读