用更少的声明覆盖CSS

我试图从引导覆盖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);
}

与

我在bootstrap.css中删除背景色，并替换它

可以用另一个值覆盖它吗？

简短回答：可以

答案很长

CSS的工作方式称为专一性。样式应用于元素有一个顺序。将其视为4个独立的数字，每个数字的默认值为0。因此0,0,0,0是默认值

第一个数字表示内联样式 e、 我是红色的 第二个数字表示ID e、 g.选举人 第三个数字代表班级 e、 g.类选择器 第四个数字表示元素和伪选择器 e、 g.，分区和：第一个孩子 这些规则按照内部样式表第一，外部样式表第二的顺序应用。如果在任何地方都定义了适用于元素的规则，并且您没有使用具有更高特定性的选择器覆盖它，那么它将保持不变

以下内容将覆盖

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

回到特异性

如果你的元素是

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

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

最后还有一个数字，一个隐藏的数字。所以0,0,0,0,0前面的那个代表！重要信息，可以在任何样式声明之后添加，以使其在任何情况下都适用。如果您有两个相互冲突的声明，它们都有！重要信息列出后，它又回到了内联与嵌入式与外部的顺序。一般来说，你应该避免！在大多数情况下都很重要，除非它绝对有意义

!有意义的重要例子。

---

很好的回答，你应该添加关于内联样式和！重要的我已经有了一些关于内联样式的知识，但是我详细阐述了！重要的

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

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

.hide {
    display: none !important;
}