CSS无法修改nav-link颜色及添加文本上方白线的问题排查

嘿，我来帮你搞定这两个导航栏的样式问题～

1. 为啥MENUTEST的nav-link文本改白色不生效？ #

先看你代码里的navbar-light类——你导航栏的背景是深绿色#083F2C，但Bootstrap的navbar-light是专门给浅色背景设计的，它内置的样式会强制把导航链接设成深色，优先级还很高，所以你自己写的CSS根本抢不过它，自然就不生效啦。

给你两个解决办法：

• 最省心的：把navbar-light换成navbar-dark，Bootstrap会自动适配深色背景的浅色文本，不用额外写多余CSS；
• 非要保留navbar-light的话（不太推荐哈），就用更具体的CSS选择器来硬刚默认样式：

  /* 覆盖默认的nav-link颜色 */
  .navbar.navbar-light .nav-link {
    color: white;
  }
  /* 别忘了hover状态也一起改 */
  .navbar.navbar-light .nav-link:hover {
    color: #eee;
  }
  

  这里尽量别用!important，用更具体的选择器就足够覆盖默认样式了。

2. 怎么在MENUTEST上方加白色线条？ #

要做文本上方的线条，有两种实用方法，看你要哪种效果：

方法一：简单快捷的文本装饰 #

直接用CSS的overline属性，线条会紧贴文本，适合追求简洁的场景：

/* 假设已经换成navbar-dark，或者用上面的选择器 */
.navbar.navbar-dark .nav-link {
  color: white;
  text-decoration: overline white;
}

方法二：灵活可调的伪元素法 #

如果想要线条和文本之间有间距，或者想调整线条粗细、位置，用::before伪元素是最好的选择：

.navbar.navbar-dark .nav-link {
  color: white;
  position: relative; /* 给伪元素定位当锚点 */
  padding-top: 8px; /* 给线条留出空间 */
}

.navbar.navbar-dark .nav-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* 线条粗细 */
  background-color: white;
}

你可以调整padding-top控制间距，修改height改粗细，甚至加个left: 10px让线条不占满整个宽度，自由度拉满。

你可能踩的坑： #

• 如果之前试了border-top，大概率是因为导航链接自带的padding，导致线条离文本太远；
• 同样要注意选择器的优先级，别让Bootstrap的默认样式把你的线条样式覆盖了。

附你提供的代码片段补充（方便参考）：

<header>
  <nav class="navbar navbar-expand-sm navbar-dark bg-faded fixed-top" style="background-color: #083F2C;">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">MENUTEST</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

内容的提问来源于stack exchange，提问作者Runsicky