4

我正在使用带有 Wordpress 的 Twitter Bootstrap。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？

4

4 回答 4

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/

于 2013-05-14T19:36:15.403 回答
1

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

但要厌倦特异性之战。您的 CSS 选择器应该比这个更具体，以确保您不会发生不希望的冲突。

于 2013-05-14T19:32:21.630 回答
0

所有这些技巧都会起作用，避免使用!important这是更好的方法。在 Bootstrap (bootstrap.css) 之后包含您的 css (site-specific.css)，您可以通过重新定义它们来覆盖规则。

例如，如果这是您在您的<head>

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

把财产放在site-specific.css

#navbar {
    color: #000000;
}
于 2013-08-20T02:50:38.073 回答
0

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

！重要的示例：

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

虽然方便，但过度使用 !important 会导致可持续性问题。尽量避免使用它。

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

于 2013-05-14T19:31:59.267 回答