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

【问题标题】：Custom css does not overwrite properties in first css file自定义 css 不会覆盖第一个 css 文件中的属性
【发布时间】：2013-07-30 14:24:51
【问题描述】：

我正在使用引导程序，但我想更改一些颜色（导航栏和按钮）。我有一个未修改的 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 中指定的任何更改。我的理解是错误的，还是我只是不正确地处理这个问题？

编辑：原始导航栏内部（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);
}

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

.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 文件。

【问题讨论】：

您能否在custom.css 中包含一个您要覆盖的示例类以及您应用该类的HTML 示例位？
您的理解在大多数情况下是正确的，但代码领域的一切都是正确的：它不是很简单，哈哈。尝试删除引导 css 并查看您的任何自定义样式是否生效，我们知道..
尝试清除浏览器缓存？也许它有效？
清除浏览器缓存。另外：检查您的浏览器控制台（Firebug 或 Chrome 开发工具），看看您的网络服务器/网页访问文件是否有任何问题。
放一些 !important :P

标签： html css twitter-bootstrap

【解决方案1】：

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

例如，考虑以下 HTML：

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

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

ul#testList { color: #f00; }

你的第二个文件有：

ul { color: #00f; }

那么您的第一个文件具有更高的特异性，即使第二个文件在您的标记中排在第二位。第一种样式的声明更加精确。

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

【讨论】：

第一个选择器完全是个坏习惯，不应该使用：ul#testList应该至少变成#testList。
@JeffNoel 它有什么问题？选择 id，或选择元素 and 和 id?
你没有选择元素 and 和 id；您正在选择一个带有 id 的元素。由于id 属性应该在整个网页中包含唯一值（否则：invalid w3c notation），如果将元素的选择器命名为id，则命名它是完全没用的。
这只是一个解释特异性的例子。但是很好奇，为什么说指定带有id的标签作为声明是一个坏习惯呢？我的声明几乎没有那么具体，但我想它可能会加快浏览器对样式的渲染，不是吗？
我同意你提出的导致冗余的方案。但是，可以有一个 CSS 文件指定用于多个页面的样式。在一个页面上，您可以有一个 ul#ID，而在另一个页面上，您可以有一个具有相同 id 的不同标签，p#ID。我同意这可能会导致错误，但我不认为这是一个坏习惯。

【解决方案2】：

编辑：

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

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

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

【讨论】：