Twitter Bootstrap覆盖css

Question

我正在使用Twitter Bootstrap和Wordpress。Bootstrap在bootstrap.css中输出以下css

.navbar-inverse .navbar-inner {
    background-color: #1b1b1b;
    background-image: -moz-linear-gradient(top, #222222, #111111);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
    background-image: -webkit-linear-gradient(top, #222222, #111111);
    background-image: -o-linear-gradient(top, #222222, #111111);
    background-image: linear-gradient(to bottom, #222222, #111111);
    background-repeat: repeat-x;
    border-color: #252525;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

如果我想在样式表中覆盖这段代码，我必须指定每个类元素吗？例如，如果我想要导航栏是全黑的-没有渐变等-有没有一种快速的方法可以做到这一点，而不是从上面复制每个类属性并将每个十六进制值更改为#000000？

Answer 1

我相信这样做足以覆盖Twitter Bootstrap中烘焙的背景属性：

 .navbar-inverse .navbar-inner { background: none }

background属性被认为是速记，因此简单的声明应该可以正常工作。

background属性的简写用法如下：

 .navbar-inverse .navbar-inner { background:#000 url('/path/to/image.png') no-repeat 100px 100px scroll; }

这个简单的属性可以同时声明和覆盖background-color、background-image、background-repeat、background-position、background-attachment和background-clip！

也是！！让样式表中的选择器更具体一点可能是个好主意，以确保您不会遇到特定问题。

下面是一个jsfiddle示例：http://jsfiddle.net/f5Yyj/1/

Answer 2

您应该能够通过使用background的组合属性来覆盖单个背景属性。例如，background: black;应该覆盖上面所有与背景相关的属性。

但要厌倦具体的斗争。你的CSS选择器应该比这个更具体，以确保你不会有不必要的冲突。

Answer 3

要覆盖以前的CSS，要么编写一个同样强大的选择器(正如您在问题中建议的那样)，要么编写一个更强的选择器(ID优先于多个类)，或者添加！对选择器很重要。

重要示例：

.navbar-inner { background: #000 !important; }

虽然方便，但过度使用！重要会导致可持续性问题。尽可能避免使用它。

绝对最好的解决方案是直接更改Bootstrap CSS，但如果您无法做到这一点，那么我建议您编写一个同样强大的选择器。