Question

我有bootstrap.min.css和以下div。

<div class='jumbotron'> 
</div>

我使用自定义css文件覆盖此类。

.jumbotron{
    background: green url(../img/city.jpg) no-repeat top left;
}

但是班级jumbotron的内容并没有改变。我知道css包含正确，因为它适用于其他没有bootstrap名称的div。我该如何解决这个问题？

Answer 1

检查Chrome开发者工具中的元素（或Firefox有类似的东西，不知道他们称之为什么）。

Right click > Inspect Element

现在看看右边的CSS样式。你在列表中的某个地方看到了自定义样式吗？你可能需要向下滚动一下。

如果它不在列表中，则表示您的CSS文件未正确包含或元素名称拼写错误，因此您的样式未应用。

如果它在列表中但被划掉，那意味着bootstrap的样式之一可能会覆盖它。您可以使用more specific selector

使您的样式优先于bootstrap的样式

Answer 2

您的自定义CSS文件是否在bootstap.min.css之后调用。也许bootstrap.min.css更重要：

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

以上链接示例：

* {} / * a = 0 b = 0 c = 0 d = 0 - ＆gt;特异性= 0,0,0,0 /
  li {} / a = 0 b = 0 c = 0 d = 1 - ＆gt;特异性= 0,0,0,1 /
  li：第一行{} / a = 0 b = 0 c = 0 d = 2 - ＆gt;特异性= 0,0,0,2 /
  ul li {} / a = 0 b = 0 c = 0 d = 2 - ＆gt;特异性= 0,0,0,2 /
  ul ol + li {} / a = 0 b = 0 c = 0 d = 3 - ＆gt;特异性= 0,0,0,3 * /
  h1 + [rel = up] {} / a = 0 b = 0 c = 1 d = 1 - ＆gt;特异性= 0,0,1,1 /
  ul ol li.red {} / a = 0 b = 0 c = 1 d = 3 - ＆gt;特异性= 0,0,1,3 /
  li.red.level {} / a = 0 b = 0 c = 2 d = 1 - ＆gt;特异性= 0,0,2,1 /
  #x34y {} / a = 0 b = 1 c = 0 d = 0 - ＆gt;特异性= 0,1,0,0 /
  风格=＆＃34;＆＃34; / a = 1 b = 0 c = 0 d = 0 - ＆gt;特异性= 1,0,0,0 * /

<HEAD>
<STYLE type="text/css">
  #x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

在上面的例子中，P元素的颜色是绿色。＆＃34; style＆＃34;中的声明由于级联规则3，属性将覆盖STYLE元素中的属性，因为它具有更高的特异性。

Answer 3

确保.jumbotron CSS覆盖在HTML文件中的bootstrap.min.css之后。

演示：http://bootply.com/tbFqSQQcOi

覆盖引导样式

3 个答案: