0

我正在尝试从引导程序中覆盖 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 中替换它的背景颜色。

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

4

1 回答 1

7

简短回答：是的

长答案如下

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,1,0。

即使您添加了 11 个类，该 ID 仍然会获胜，这种情况下的特异性将是 0,0,11,0

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

! 有意义的重要示例。

.hide {
    display: none !important;
}
于 2013-01-25T23:47:46.563 回答