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);
}

スタイル シートでこのコードをオーバーライドしたい場合、すべてのクラス要素を指定する必要がありますか? たとえば、ナビゲーション バーを完全に黒くしたい場合 (グラデーションなどはありません)、上からすべてのクラス属性をコピーしてすべての 16 進数値を #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この 1 つの単純なプロパティは、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) を含めます。ルールを再定義してオーバーライドできます。

たとえば、このように 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 に答える