Pseudo-Selektor: Last-Kind funktioniert nicht

Question

Ich benutze eine Navbar in Bootstrap 4 und ich kann nicht herausfinden, wie man border-right auf nav-link mit Ausnahme der letzten Artikel anwenden.

Hier ist mein 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> 

UND SCSS:

.navbar { 
    .navbar-nav { 
    .nav-link { 
     border-right:1px solid red; 
     &:last-child { 
      border-right:none; 
     } 
     } 
    } 
} 

Ich weiß nicht, warum, aber dieses Beispiel werden alle Grenzen von nav-link statt der letzten.

Ich möchte dies ohne Javascript oder eine bestimmte Klasse erreichen! Vielen Dank.

Answer 1

Alle Ihre nav-link sind die letzten untergeordneten Elemente des übergeordneten Elements. Versuchen Sie es stattdessen. Auch nicht, dass es nicht so spezifisch sein muss, aber ich nehme an, dass Sie über Spezifität wissen, also werde ich es so behalten wie es ist.

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

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

Beachten Sie, dass ein Streu Schließen li Element haben.

Answer 2

:last-child sollte Ziel nav-item anstelle von

Code SCSS ändern werden:

.navbar { 
    .navbar-nav { 
    .nav-link { 
     border-right:1px solid red; 
    } 
    .nav-item { 
     &:last-child { 
     .nav-link { 
      border-right:none; 
     } 
     } 
    } 
    } 
}