我不知道为什么我的代码导航栏文本颜色没有改变？ [复制]答案

【问题标题】：I don't know why navbar text color is not changing for my code? [duplicate]我不知道为什么我的代码导航栏文本颜色没有改变？ [复制]
【发布时间】：2019-12-07 16:34:21
【问题描述】：

我正在尝试使用引导程序和 CSS 制作导航栏。我尝试了很多方法，但要更改导航栏文本颜色，但除了内联 CSS 外，没有任何方法可以工作。任何人都可以帮助我解决我的问题。

<!DOCType html>
<html>

<head>
  <title>My Second Class Assignment</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-white">

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="navbar-brand" href="#">
              <img src="image/logo.png" class="d-inline-block align-top" alt="Learn Xpert">
            </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">PAGES</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-blue" href="#">BLOG</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-blue" href="#">CONTACT</a>
          </li>
        </ul>
      </div>
  </div>
  </nav>

  <!---JavaScript--->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="js/bootstrap.min.js" rel="stylesheet"></script>
</body>

</html>

CSS 文件

/* CSS */ 
a{
    color:#ff6347;
    font-size: 20px;
}

【问题讨论】：

检查浏览器中的元素并找出将哪个规则应用于元素/导航。它应该是一些引导规则。复制该规则并粘贴到您的样式表中并应用样式。
@Zim 我尝试了这些方法，但没有找到适合我的方法。

标签： html css bootstrap-4

【解决方案1】：

使用

引导样式导航链接

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
}

因此，要覆盖，您需要在原始样式之后包含相同级别（或更高）的特异性。裸锚样式不足以改变链接的样式，这就是颜色不会改变的原因

More information about css specificity

【讨论】：

谢谢。给大家。它正在工作。 :)

【解决方案2】：

这样瞄准

.navbar-light .navbar-nav .nav-link {
    color:#ff6347;
    font-size: 20px;;
}

https://jsfiddle.net/lalji1051/xda1sur5/3/

【讨论】：

谢谢。给大家。它正在工作。 :)

【解决方案3】：

CSS 选择器具有特殊性。您应该避免使用 !important 指令，因为它会使您的代码难以维护和扩展。

相反，您需要为您的选择器添加等效或更多的特异性：

.navbar-nav .nav-item a.nav-link {
  color: #ff6347;
  font-size: 20px;
}

【讨论】：

谢谢。给大家。它正在工作。 :)