！有意义的重要例子。

Question

我正试图从bootstrap覆盖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;

}

我删除了在bootstrap .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,1,0。

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

最后一个号码，隐藏号码。所以0,0,0,0,0前面的那个代表!important，可以在任何样式声明之后添加，以便无论如何都可以应用它。如果您有两个列出!important的冲突声明，则它会回退到内联与嵌入与外部的顺序。一般来说，除非绝对有意义，否则你应该避免使用！最重要的是费用。

！有意义的重要例子。

.hide {
    display: none !important;
}

使用较少的声明覆盖CSS

1 个答案:

！有意义的重要例子。