Question

嗨，所以我是第一次尝试bootstrap，css和html，并想更改导航栏上文本的颜色。我想更改导航栏的颜色而不使用“！important” 这是我的HTML代码：

<html>

<head>
  <html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="cpis.css">

  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
      <a class="navbar-brand" href="#">Brand testing</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <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="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" tabindex="-1">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
    <div class="container-fluid bg-secondary" style="font-size: 20px; font-family: tahoma; color: goldenrod;">
      Test12 12 23
    </div>
    <div class="container-fluid border bg-secondary text-white">
      <button type="button" class="btn btn-success">Exit</button>
      <button type="button" class="btn btn-success">New</button>
      <button type="button" class="btn btn-success">Search</button>
    </div>

  </body>
</html>

这是我的CSS代码：

.navbar-brand{
    color: coral !important;
}
.navbar-nav li a{
    color: coral !important;
}

不使用“！important;”，文本不会改变颜色，我需要知道为什么会发生这种情况，因为我担心将来在此代码中会出现问题。预先感谢！

Answer 1

问题通常是由于在引导样式表之前放置了CSS样式表。将样式表放在引导样式表之后。

类似这样

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">

*这是一个示例，因此请替换您正在使用的任何引导程序版本

Answer 2

主要是由于链接或样式标签的排列引起的。如果您在连接到引导程序的链接标签之前使用样式标签，则它将覆盖所有内容，并且样式标签不会对页面产生任何影响。尝试在链接标签之后编写脚本标签

Answer 3

您需要使用此：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Answer 4

一切都很好。

您需要在样式表中使用与引导程序样式表中相同的选择器来覆盖引导程序样式。

请在CSS下方尝试。

.navbar-light .navbar-brand, .navbar-light .navbar-nav .nav-link{
    color: coral;
}

为什么不使用'！important'就无法在导航栏上更改颜色

4 个答案: