僞選擇器：最後一個孩子不工作

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; 
     } 
     } 
    } 
    } 
}