个人中心
gpt4 book ai didi

html - 为什么不使用 '!important' 就无法更改导航栏的颜色

转载 作者：行者123 更新时间：2023-11-28 13:55:52 25 4
gpt4 key购买 nike

<分区>

您好，我是第一次尝试 bootstrap、css 和 html，想更改导航栏上文本的颜色。我想在不使用“!重要”的情况下更改导航栏的颜色这是我的 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;”，文本不会改变颜色，我需要知道为什么会这样，因为我担心这段代码以后会出现问题。提前致谢!

25 4 0
文章推荐： javascript - 如何限制 JQuery 克隆 Div 的数量？
文章推荐： css - 如何使用 CSS 网格 (Semantic.gs) 在嵌套列的父列上填充
文章推荐： css - 改变 Nivo slider 的位置
文章推荐： css - 输入密码和 :after pseudoelement text
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com