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

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

但是厌倦了特殊的战斗。您的CSS选择器应该比这个更具体，以确保您不会有不希望的冲突。

Answer 2

我相信这足以做到以下几点来覆盖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 3

要覆盖以前的CSS，要么编写一个同样强大的选择器（正如您在问题中所建议的那样），一个更强的选择器（ID优先于多个类），或者将！important添加到选择器。

！important的例子：

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

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

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

Answer 4

所有这些提示都可行，避免使用!important这是一种更好的方法。在Bootstrap（bootstrap.css）之后包含你的css（site-specific.css），你可以通过重新定义它们来覆盖规则。

例如，如果您在<head>

中包含CSS

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

将该属性放入site-specific.css

#navbar {
    color: #000000;
}

Twitter Bootstrap覆盖css

4 个答案:

！important的例子：