html - 伪选择器 :last-child not working

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 都是父元素的最后一个子元素。试试这个。也不是说它不必如此具体，但我假设你知 Prop 体情况，所以我会保持原样。

.navbar {
  .navbar-nav {
     .nav-link {
        border-right:1px solid red;
      }

     li {
       &:last-of-type {
          .nav-link {
             border-right:none;
          }
        }
     }
   }
}

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