Question

我定义了一个自定义类，使用自定义类 navbar-brand-custom 覆盖div元素的color属性。我了解到后面定义的样式总是优先于其他样式，因此项目名称应该显示为自定义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>

我在这里创建了场景。＆＃39;项目名称＆＃39;仍然是默认颜色，而不是蓝色。 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

CSS优先级无法按预期使用bootstrap工作

2 个答案: