Bootstrap 4中.active类的CSS color属性不生效问题求助

这问题我之前踩过坑！核心原因是CSS选择器的优先级与继承规则在搞鬼，咱们来理清楚：

为什么color不生效？ #

Bootstrap 4里的.nav-link类是直接绑定在<a>标签上的，它自带了color样式。而你的.active是加在父元素.nav-item上的——CSS中，直接作用在元素本身的样式优先级远高于父元素的继承样式，哪怕你给父元素的color加!important也没用，因为父元素的颜色样式本来就不会覆盖子元素自身的颜色设置。

至于你说的font-weight、border这些属性能生效，是因为这些样式是直接作用在.nav-item这个div容器上的，和子元素<a>的样式不冲突，所以能正常显示。

几种可行的解决方案： #

方案1：使用更精准的后代选择器

直接选中.active父元素下的.nav-link，这样选择器优先级会高于单独的.nav-link：

.active .nav-link {
  font-weight: bold;
  border: 2px solid red;
  background: yellow;
  text-decoration: underline;
  color: black; /* 现在可以正常生效了 */
}

方案2：遵循Bootstrap官方推荐的写法

Bootstrap 4的导航栏其实推荐把.active类直接加在.nav-link标签上，而不是父元素.nav-item。调整你的HTML结构：

<div class="navbar-nav">
  <div class="nav-item">
    <a class="nav-link active" href="#">Link-1</a>
  </div>
  <div class="nav-item">
    <a class="nav-link" href="#">Link-2</a>
  </div>
</div>

然后对应的CSS就可以直接写：

.nav-link.active {
  font-weight: bold;
  border: 2px solid red;
  background: yellow;
  text-decoration: underline;
  color: black;
}

这种写法更符合Bootstrap的设计规范，后续维护也更省心。

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