我正在尝试改变我的引导网站中与类“navbar-brand”链接的颜色。无论我如何构造css选择器，我似乎都无法改变文本颜色。但是，我知道css正在加载，因为我可以更改navbar的背景颜色。下面是缩短的代码：
我的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;
}
最终结果：一个深蓝色条，带有默认navbar附带的灰色文本。谢谢你的帮助。
编辑：这里类似的问题对我没有帮助。我能够改变navbar-nav的元素，但不能改变Navbar-Brand。
编辑2：为了回应Abhinav Guaniyal的评论，我检查了Firefox中的元素。实际上，引导程序中的.navbar-brand规则不知怎么地覆盖了我的css文件中的.navbar-brand（如果这是错误的术语，很抱歉）。这是为什么？既然我在引导后链接了main.css，我的css文件难道不应该覆盖引导的文件吗？
Bootstrap的
.navbar-default .navbar-brand {
比你的
.navbar-brand {
而且
.navbar-header a {
您希望使代码更加具体。
试试这样的方法：
.navbar .container .navbar-header a.navbar-brand {
color: white;
}
这么想吧。假设您的代码中有10个不同的位置，在这些位置使用链接。在CSS中使用.navbar-brand{color：white}可以处理所有10个A标记。如果您决定在这10个位置中的1个位置应用不同的样式而不影响其他9个位置，而不是必须完全删除CSS规则或添加额外的ID/类，那么您可以通过更具体地覆盖您想要的一个。浏览器会识别出您更具体，并假定您希望更具体的样式覆盖泛型样式。
