のクラス、タグ、IDを繰り返さずに、内のすべてのクラス、タグ、IDをcss.css
上書きしたい。bootstrap.min.css
bootstrap.min.css
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">
そのような魔法はありません。CSSにはカスケードなどの独自の原則があり、それらをオフにすることはできません。
css.css
への参照の後にへの参照を配置できますがbootstrap.min.css
、これは、CSSルールがどのように適用されるかを解決するプロセスの1つの要素にすぎません。一般に間違った設計の症状である追加!important
は、さらに別の要因です。セレクターの特異性が高い場合!important
、以前のファイルのルールがルールをオーバーライドする可能性があります。!important
CSSルールをオーバーライドするには、オーバーライドするルールを分析し、カスケードの原則に従って「勝つ」ルールを設定する必要があります。
シンプルで、より重要なCSSファイルを最後に含めます。
スタイルシートを含めると、以前に含まれていたスタイルシートのすべての宣言が上書きされます。インクルードを次のように変更した場合:
<link href="css/css.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
ブートストラップは後で含まれ、css.cssのプロパティを上書きします。
お役に立てば幸いです。
私はあなたに例を与えることができるだけです。
Bootstrap.cssが次の
.rules #world {border:0px;}
[特異性110]を持っているとしましょう
css.cssには次の
div #world{border:20px;}
[特異性101]があります。
この場合、bootstrap.cssは常にcss.cssをオーバーライドします。したがって、すべてのコンテンツにコンテナを追加することをお勧めします-このコンテナにid..lets say "god"を付けてから、接頭辞.godをcssのすべてのスタイルに追加します-しかし、これもそれほど単純ではありません、そしてあなたがあなたの計算を正しくする方法に大きく依存します。
#god div #world{border:20px;}
これは他の誰かが指摘したように長さのトピックです-したがって、基本的にすべてのブートストラップがページに対して何をしているのか、そしてcss.cssが何をしているのかを知る必要があります。
古くなることのないこの素晴らしい記事をいつでも検索できますhttp://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
私はあなたが1つのことをすることができると思いますそれはcss.cssと@import"css/ bootstrap.min.css"だけをcss.cssに含めるので、あなたのコードはこのようになります
HTML内
<link href="css/css.css" rel="stylesheet">
およびcss.css内
@import "css/bootstrap.min.css"
.bootstrap_class{//your style..}
.hero-unit{background: red;}
このトリックを使用すると、頭痛の結果を表示せずにブートストラップスタイリングをオーバーライドできます。
ファイルを変更できず、cssファイルの呼び出し順序が機能しない場合は、いつでも!importantを使用できますが、cssのすべての行に追加する必要があるため、多くの時間がかかります。
例:表示:インライン!重要;
以前のスタイルシートを常に上書きするリストの最後の項目を参照してください
以下では、以前のスタイルシートプロパティを上書きするため、ページを980pxに合わせるように強制します
例
Style1.css
#main{ width:1000px;}
Style2.css
#main{ width:980px;}
or
#main{ width:980px !important;} /* if needed only */
HTML
<link href="style1.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<div id="main"></div>