Question

我正在使用bootstrap，但我想改变一些颜色（导航栏和按钮）。我有一个未修改的bootstrap.css和一个custom.css，它更改了我想要从默认值更改的所有属性。

在我的index.html中，我链接默认引导程序，然后链接自定义css文件。

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="bootstrap/css/custom.css" rel="stylesheet" type="text/css"/>

我是网络新手，但我的理解是样式表按照链接的顺序相互添加。但是当我在浏览器中打开它时，它不会使用custom.css中指定的任何更改。我的理解是错误的，还是我只是错误地解决了这个问题？

编辑：原始navbar-inner（bootstrap.css）

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa; /* #fafafa */ 
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); /*#f2f2f2 */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

navbar-inner，在custom.css中修改了一些属性

.navbar-inner {
  background-image: -moz-linear-gradient(top, #002f6c, #002f64);
  background-image: -ms-linear-gradient(top, #002f6c, #002f64);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#002f6c), to(#002f64));
  background-image: -webkit-linear-gradient(top, #002f6c, #002f64);
  background-image: -o-linear-gradient(top, #002f6c, #002f64);
  background-image: linear-gradient(top, #002f6c, #002f64);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'002f6c, endColorstr='#'002f64, GradientType=0);
}

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">Test</a>
      <ul class="nav pull-right">
        <li class="pull-right"><a href="about.html">About</a></li>
        <li class="pull-right"><a href="contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

是否还需要更改第一个div类？（他们不是）

我使用this tool生成custom.css文件。

Answer 1

说CSS样式按照它们应用的顺序堆栈不一定是正确的。 CSS按重要性或特异性顺序应用。

例如，请考虑以下HTML：

<ul id="testList">
    <li>Some data</li>
</ul>

如果你的第一个文件有CSS：

ul#testList { color: #f00; }

，你的第二个档案有：

ul { color: #00f; }

然后你的第一个文件具有更多特异性，即使第二个文件在你的标记中排在第二位。第一种风格在宣言中更为精确。

但是，如果您将第二种样式更改为具有匹配的特异性，则第二种声明将覆盖第一种样式。希望这有帮助！

Answer 2

编辑：

事实证明我使用的工具不会改变所需的每个属性！它应该也改变了.navbar-inverse类。在那里应用更改后，它按预期工作。

换句话说，两个文件都已正确链接。

感谢您的回答！我当然学到了一些新东西。

自定义css不会覆盖第一个css文件中的属性

2 个答案: