HTML - CSSスタイルを優先する

私は2つのスタイルシート読み込みますHTMLがあります。HTML - CSSスタイルを優先する

ブートストラップスタイル（bootstrap.css）
カスタムアプリスタイル（site.css）

私は、次のしているコードをin bootstrap.css

.modal-open .modal { 
    overflow-x: hidden; 
    overflow-y: auto; 
}

私は挿入する必要があります私site.cssへのT私はbootstrap.cssを変更せずにsite.cssスタイルに優先権を与える：!importantを追加

.modal-open .modal { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    background-color: #D5D5D5 
}

出典

2016-12-05 VAAA

まず@lukaが示唆のように、あなたはbootstrap.css後site.cssファイルをロードする必要があります。これは、ブートストラップの特定性が本当に高いルールセットを与えるので、常に成功を保証するとは限りません。それはあなたの特定の状況で表示されます、あなたは何の問題もないはずです。しかし、Bootstrapのルールセットは時には相互に絡み合っており、ルールセットが成功するのを妨げている可能性がある、または認識できないことがあるかもしれません。あなたはbootstrap.css後site.cssをロードする場合は

はは!importantを使用しない、動作しません。代わりに、あなたのセレクタにダブルアップ：ブートストラップのは、この技術は何年も私のために100％となっている2である一方、

.modal-open.modal-open .modal.modal { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    background-color: #D5D5D5 
}

このonline toolによると、CSSの特異性スコア以上のセレクタは、4です。

出典

2016-12-05 02:02:21 zer00ne

試してみてください。

.modal-open .modal { 
    overflow-x: hidden !important; 
    overflow-y: scroll !important; 
    background-color: #D5D5D5 !important; 
}

出典

2016-12-05 01:42:01 bumbumpaw

よりもむしろ!importantを追加し、あなただけのブートストラップスタイルシートの後にカスタムスタイルシートを追加することができますサイトの<head>セクション：

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

このように、重複したCSSセレクタ/プロパティのsite.cssは、あなたは、いくつかのオプションがありbootstrap.css

出典

2016-12-05 01:42:18

をオーバーライドします：ルールはまったく同じである場合

を - 存在する最後のルールはとても（引き継ぎます最初にbootstrap.cssにリンクし、その後にsite.cssにリンクすると、site.cssのスタイルが使用されます。
!importantを追加できます（最適なオプションではありませんが、実行することはできます）。
あなたはセレクタを複製することができます。.modal-open.modal-open .modal.modal {...}

出典

2016-12-05 01:42:41 Dekel

HTML - CSSスタイルを優先する

答えて

関連する問題