Question

我正在尝试使用Bootstrap网站中的“navbar-brand”类更改链接的颜色。无论我如何构建我的css选择器，我似乎无法改变文本颜色。但是，我知道正在加载css，因为我可以更改导航栏的背景颜色。这是缩短的代码：

我的index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Foobar Brand</a>
        </div>
      </div>
    </div>
  </body>
</html>

我的main.css：

    // change the color of the navbar to a dark blue
    .navbar {
        background-color: #3c4c66;
    }

    // some of the selectors I've tried to get the text to be white.
    // why are they not working?
    .navbar-brand {
        color: white;
    }

    .navbar-header a {
        color: white;
    }

    a {
        color: white;
    }

最终结果：带有默认导航栏附带的灰色文本的深蓝色条。谢谢你的帮助。

编辑：类似的问题here对我没有帮助。我能够改变navbar-nav的元素，但不能改变navbar-brand。

编辑2：在回应Abhinav Guaniyal的评论时，我检查了Firefox中的元素。实际上，不知何故，Bootstrap中的.navbar品牌规则在我的css文件中覆盖了（对不起，如果这是错误的术语）.navbar-brand。为什么是这样？我的css文件不应该覆盖Bootstrap，因为我在Bootstrap之后链接了main.css吗？

Answer 1

自举＆＃39; S

.navbar-default .navbar-brand {

比您的

更具体

.navbar-brand {

和

.navbar-header a {

您希望更多地保留代码specific。

Answer 2

尝试这样的事情：

.navbar .container .navbar-header a.navbar-brand {
    color: white;
}

这样想。想象一下，您在代码中有10个不同的位置使用<a class="navbar-brand">link</a>。在CSS中使用.navbar-brand{ color:white }将适用于所有10个a标记。如果您决定要在这10个地方中的1个中应用不同的样式而不影响其他9个地方，而不是必须完全删除CSS规则或添加额外的ID /类，您可以覆盖您想要的那个更加具体。浏览器会识别您更具体，并假设您希望使用更具体的样式来覆盖通用样式。

为什么CSS没有为这个Bootstrap网页设计样式？

2 个答案: