私のCSSはブートストラップCSSでオーバーライドされています

Question

私はすでに起動しているプロジェクトにGWT-Bootstrapを追加します。私はそれを使用することができましたが、Bootstrap CSSは他のすべてのCSSを上書きしています。その結果、以前のすべてのUI要素が混在してしまいます。

余白、テキストサイズ、および多くの要素がこれ以上適合しません。私はブートストラップを使うことができません。なぜなら、残りのプロジェクトはすべて使用できないからです。私はブートストラップへの進歩的な変更を行い、古いものをそのまま維持したいと考えています。私は、この優先順位に私のCSSを持っていると思い

：

• のMyApp
• GWT
• ブートストラップ

私はせずに自分の*の.gwt.xmlでそれらを注文してみました成功：

<stylesheet src="css/gwt-bootstrap.css" /> 
<stylesheet src="css/bootstrap.min.css" /> 
<stylesheet src="gwt/clean/clean.css" /> 
<stylesheet src="MyApp.css" /> 

僕にできる？

Answer 1

複雑なアルゴリズムは、HTMLに含める順序だけではありません。 CSSスタイルは、最も具体的な選択ルールで選択されます。インラインルールは、より具体的に外部にアタッチされ、IDで選択された後、クラスが選択され、最後にタグ名で選択されます。例えば、段落<p id="xyz" class="xyz">は独立してルールの順序を赤になります。同じ選択タイプを持つ2つのルールがある場合は

.xyz { 
    color: blue; 
} 
#xyz { 
    color: red; 
} 

、数が重要。だから、選択.xyz .abcは "より強い"、次に.qwertyです。

2つのルールは非常に最後の順番を考慮するには、その後、各カテゴリ内の数字の面で同等の選択をしている場合は...

あなたはまた、!importantディレクティブで異なる順序を強制することができます。

Read more「CSSの特異性」のキーワードを付けてください。

Answer 2

スタイルのオーバーライド方法は最後にロードされたものが勝ちです。

ですから、その後、ブートストラップCSSを無効にするためにGWT-ブートストラップからスタイルを期待している場合は、より多くのこのようなスタイルシートのオーダー何かを注文したいと思います：使用してスタイルの優先順位がよりによって駆動される

<stylesheet src="css/bootstrap.min.css" /> 
<stylesheet src="gwt/clean/clean.css" /> 
<stylesheet src="css/gwt-bootstrap.css" /> 
<stylesheet src="MyApp.css" />