CSS优先与引导

我定义一个定制类重写的颜色属性使用自定义类导航栏品牌定制 div元素预期不工作。我了解到后面定义的样式总是优先于其他样式，因此项目名称应该以自定义CSS中定义的蓝色显示。但不知何故，我没有看到发生。你能看看我是否缺少任何东西。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>

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

来源

2015-04-18 Tejus

包含在下bootstrap.css内部CSS文件？ –

检查[这]（http://www.w3.org/TR/CSS21/cascade.html#cascade）了解级联偏好。 –

试试这个：

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

来源

2015-04-18 18:21:53 blearn

引导的造型决定了这个

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

这只是一个改善你的选择为增加特异性的事情

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

JSFiddle Demo

来源

2015-04-18 18:21:59

谢谢！这样可行。但仍然想知道为什么它不起作用，当不那么具体。我的意思是为什么外部风格仍然优先 – Tejus

似乎还有一点小问题。我已经指定了悬停风格为蓝色。这很好。然而，右击项目名称会导致其行为异常。它只是后退，并假设它右键点击时口述的颜色。 – Tejus

右键点击？这不允许在CSS中...我不知道你在做什么。 –

有在bootstrap.css内置的规则，具有较高的特异性：

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

要覆盖这一点，你需要相匹配的元素，并使用两个或多个类别的规则。你可以这样做：

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

上述规则有一些已知的老版本的IE问题。如果你想避免它再尝试其他的组合：

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

Updated Fiddle

来源

2015-04-18 18:33:06

CSS优先与引导

回答

相关问题