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>

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

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

2 个答案: