伪选择器：最后一个孩子不工作

Question

我在引导程序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; 
     } 
     } 
    } 
    } 
}