Twitter bootstrap - 使用更少的声明覆盖 CSS

Question

我正在尝试从引导覆盖css。我将设计没有颜色的导航栏。

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #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 {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
}

我删除了背景颜色，替换了引导.css。

是否可以只用另一个值覆盖它？

Answer 1

简短回答：是

长答案如下

CSS的工作方式称为特异性。样式应用于元素是有顺序的。将其视为 4 个单独的数字，每个数字的默认值为 0。所以 0,0,0,0 是默认值

• 第一个数字表示内联样式例如，<span style="color: red">I'm Red</span>
• 第二个数字表示 ID例如，#IdSelector
• 第三个数字代表类例如，.ClassSelector
• 第四个数字表示元素和伪选择器例如，div和:first-child

这些规则按内部样式表优先，外部样式表第二的顺序应用。如果定义了适用于您的元素的 ANYWHERE 规则，并且您没有使用具有更高特异性的选择器覆盖它，那么它将保持不变。

以下内容将覆盖

.navbar-inner {
    background-image: none;
}

回到特异性。

如果您的元素<div id="mainNav" class="navbar-inner"></div>

#mainNav {
    background-image: none;
}
.navbar-inner {
    background-image: url(img.png);
}

然后图像将设置为无。ID 选择器的特异性为 0,1,0,0,0，类扇区的特异性为 0,0,1,0。

即使您添加了 11 个类，ID 仍将获胜，在这种情况下，特异性为 0,0,11,0

还有最后一个数字，一个隐藏的数字。 所以 0,0,0,0,0 前面的那个代表 !important ，可以在任何样式声明之后添加，使其无论如何都适用。如果列出了两个冲突的声明!important，它将回退到内联、嵌入式和外部的顺序。一般来说，你应该不惜一切代价避免！important，除非它绝对有意义。

！有意义的重要例子。

.hide {
    display: none !important;
}