悬停状态下的锚定颜色不起作用

Question

我希望我的所有主持人的文字在被徘徊时变成绿色 我希望a:hover{ color: green; }可以正常工作，但事实并非如此 有人能解释我为什么吗？ 谢谢。

这是我的代码：

＆＃13;

＆＃13;

a:hover{
  color: green;
}

＆＃13;

<link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<div class="container-fluid">
    <nav class="navbar navbar-inverse navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
</div>
<!-- end container -->

＆＃13;

＆＃13;

＆＃13;

同样在Codepen

Answer 1

Bootstrap使用类来设置其导航链接的样式。使用样式时，对样式的优先级有一定的重要性。 a:hover本身将被.nav.navbar-nav li a:hover覆盖，即使它已在您的代码之前定义。

在这里阅读： https://css-tricks.com/specifics-on-css-specificity/

P.S。 尽量不要在!important上使用你的风格。它使得更改事情变得更加困难，使您的代码可维护性变得非常困难，并且会使您的项目中的任何人都像您一样工作：）

肯定有时需要!important，但我想说保守使用它。

Answer 2

你正在使用Bootstrap定义了锚点上的颜色是不同的地方。

不是仅仅覆盖Bootstrap（并且有多种情况需要覆盖所有锚点），而是使用Bootstraps内置的可燃性。

下载源代码，更新控制颜色的适用SASS变量，并在构建过程中包含源代码。

使用Bootstrap pre-4还有其他几个选项：下载准备好的自定义Bootstrap的工具（主要是修改SASS变量并为您转换的工作）。或者使用Bootstrap主题。 （覆盖$navbar-default-brand-hover-color将更改导航栏中的悬停颜色。）

这些中的任何一个最初都会花费更长时间，但是当下一个＆＃34;只是改变那个＆＃34;随着你的要求，我们可以迅速做到这一点。

Answer 3

add this

.navbar-inverse .navbar-nav > li > a:hover{
 color: green;
 }

Answer 4

“navbar”类已经将样式应用于其中的标记。它会覆盖您的自定义样式。

CSS被解释。首先声明的样式将被其后声明的相同样式覆盖。所以只需更改包含样式表的顺序即可。插件和框架首先。自定义样式是最后的。

<link rel="stylesheet" href="https://bootstrap.css" />
<link rel="stylesheet"href="mystyles.css" />

现在mystyles.css中的样式将覆盖插件具有相同名称的任何内容，而不是相反。

新样式应该与它们覆盖的样式具有相同的特异性（除非它们具有！重要性）。参考（特异性）[https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity]。

对于这种情况

.navbar-inverse .navbar-nav > .active > a:hover {
    color : green;
}

而不是

a {
    color : green;
}

Answer 5

无论使用哪种框架，要确定适合的css规则，请首先使用开发人员控制台检查元素。在这种情况下，你会发现：
.navbar-inverse .navbar-nav > li > a:hover {…

问题是，您的新规则必须more specific才能接管原始规则。具体而言，规则越具体，统治所有就越多。

根据Mozilla Developer Network文档，这里有一个选择器类型列表，具体增加。

  

0 - 类型选择器（例如，h1）和伪元素（例如，:: before）   1 - 类选择器（例如，.example），属性选择器（例如，[type =“radio”]）和伪类（例如：：悬停）。
  2 - ID选择器（例如，＃example）。

您希望所有锚点（您的页面？）难以辨认，然后规则不要太冗长，您可能需要在所有锚点共有的最顶级祖先上添加id属性！你必须这样一个顶级的容器块（也可能是html或body标签，但那会觉得难看）......

以下是为您的所有代码添加<div id="common-ancestor">时所获得的内容：

#common-container a:hover{
  color: green;
}

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>

<div id="common-container">
  <div class="container-fluid">
      <nav class="navbar navbar-inverse navbar-default" role="navigation">
          <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Brand</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                      <li class="active"><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                              <li class="divider"></li>
                              <li><a href="#">One more separated link</a></li>
                          </ul>
                      </li>
                  </ul>
                  <form class="navbar-form navbar-left" role="search">
                      <div class="form-group">
                          <input type="text" class="form-control" placeholder="Search">
                      </div>
                      <button type="submit" class="btn btn-default">Submit</button>
                  </form>
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                          </ul>
                      </li>
                  </ul>
              </div>
              <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
      </nav>
  </div>
  <!-- end container -->

</div>
<!-- end "#common-container"-->

小丑：
您可能听说过!important后缀，例如color: green !important; 通常它被用作最后的手段，如果你绝对确定你不需要覆盖它应用的规则（但谁做！？）并且现有的规则要复杂以便被覆盖。 覆盖具有!important的规则的唯一方法是编写另一个带有!important的规则，该规则将在稍后的源代码中显示（稍后由css引擎解释）。
使用不当或过度使用肯定会导致你完全疯狂，使用风险自负。

Answer 6

添加此!important

a:hover{
  color: green !important;
}

默认情况下，它是白色的。要覆盖它，您需要放置!important

注意 如果您认为需要，只能使用!important覆盖。否则，您需要将a更改为特定的班级名称