CSS 优先级在 bootstrap 中无法按预期工作

Question

我正在定义一个自定义类，以使用自定义类 navbar-brand-custom 覆盖 div 元素的颜色属性。我了解到，稍后定义的样式总是优先于其他样式，因此项目名称应该以自定义 CSS 中定义的蓝色显示。但不知何故，我没有看到这种情况发生。你能看看我是否遗漏了什么。

外部 CSS：

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

内部 CSS：

.navbar-brand-custom
{
  color:blue;
}

HTML：

<div class="container-fluid navbar navbar-default navbar-fixed-top">
<div class="container">
        <div class="navbar-header">
         <a class="navbar-brand navbar-brand-custom" href="#" >Project name</a>
        </div>
</div>
</div>

我在这里创建了场景。 “项目名称”仍然是默认颜色，而不是蓝色。 https://jsfiddle.net/u3nh21uL/

Answer 1

试试这个：

.navbar-header a.navbar-brand-custom
{
  color:blue;
}

Answer 2

Bootstrap 的样式决定了这一点

.navbar-default .navbar-brand {
  color: #777;
}

这只是改进选择器以增加特异性的问题

 .navbar-brand.navbar-brand-custom    {
  color:blue;
}

JSFiddle Demo