引导导航选项卡的字体颜色在活动状态下没有变化答案

【问题标题】：Font color of bootstrap nav-tabs not changing in active state引导导航选项卡的字体颜色在活动状态下没有变化
【发布时间】：2021-05-20 00:32:27
【问题描述】：

我正在尝试在单击时更改引导导航选项卡的字体颜色。我可以使用 css .nav-tabs>li>a 将未选择的导航选项卡的字体颜色更改为绿色，但是 css 块 nav-tabs>li.active>a 似乎无法更改所选选项卡的颜色。请帮忙。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <style>
  .nav-tabs>li>a{
  color:green;
  }
  .nav-tabs>li.active>a{
  color:green;
  }
  </style>
</head>
<body>
 <ul class="nav nav-tabs">
  <li class="nav-item">
   <a class="nav-link active"
      href="#id1"
      data-toggle="tab">one</a>
  </li>
  <li class="nav-item">
   <a href="#id2"
      class="nav-link"
      data-toggle="tab">two</a>
  </li>
 </ul>
</body>

【问题讨论】：

标签： html css bootstrap-4 frontend web-frontend

【解决方案1】：

要为活动状态着色，您必须覆盖引导样式，如下所示：.nav-tabs a.nav-link.active

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <style>
  .nav-tabs>li>a{
  color:green;
  }
  .nav-tabs a.nav-link.active {
    color: red;
  }
  </style>
<body>
 <ul class="nav nav-tabs">
  <li class="nav-item">
   <a class="nav-link active"
      href="#id1"
      data-toggle="tab">one</a>
  </li>
  <li class="nav-item">
   <a href="#id2"
      class="nav-link"
      data-toggle="tab">two</a>
  </li>
 </ul>

【讨论】：

【解决方案2】：

改为

.nav-tabs>li.active>a{
     color:green;
}

您可以使用以下代码更改所选标签的颜色

.nav-tabs .nav-link.active{
    color:red; /*color you want*/
}

【讨论】：

【解决方案3】：

您的选择器不正确。 .active 类在锚标记中。你已经给li

改变

.nav-tabs>li.active>a{
  color:green;
  }

到

.nav-tabs > li > a.active {
  color:green;
}

【讨论】：

非常感谢大家。帮助加快了我的家庭作业