メインスタイルシートをオーバーライドするために@importスタイルシートを取得するにはどうすればよいですか？

メインスタイルシートファイルに@importを使用して別のスタイルシートをインポートしました。 @importスタイルシートで行った変更をメインスタイルシートよりも優先したいと思います。これは可能ですか？メインスタイルシートをオーバーライドするために@importスタイルシートを取得するにはどうすればよいですか？

出典

2011-10-03 Kenshi

メインスタイルシートのあとに@importを実行してください。 –

ちょうど試してみましたが、もうロードされていません – Kenshi

他のスタイルシートをインポートしてスタイルをオーバーライドすることを目標とする場合は、優先順位を使用する必要があります。

<head> 
    <title>Title</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <link href="style-override.css" rel="stylesheet" type="text/css" /> 
</head>

ここstyle.cssは、オリジナルであるとstyle-override.cssは、新しいカスタムCSSが含まれています。これらのスタイルは、style.cssのスタイルを上書きします。つまり、スタイルが上書きされるため、!importantを使用する必要はありません。

できるだけ避けてください！あなたではなく、ページからすべてのスタイルを削除CSSのリセットを使用する場合は

はサイドノートとしても

<style type="text/css"> 
    @import url("style.css"); 
    @import url("style-override.css"); 
</style>

@importすることができません。

<style type="text/css"> 
    @import url("style.css"); 
    @import url("reset.css"); 
    @import url("style-override.css"); 
</style>

http://meyerweb.com/eric/tools/css/reset/でCSSリセットをチェックし、reset.cssに追加してください。

出典

2011-10-03 22:00:56 Kirk

これは感謝しました！ – Kenshi

@import最初のスタイルシートの最後に2番目のスタイルシート。

あなたはあなたの第二のスタイルシートが同じセレクタを使用している場合、それは問題なく最初をオーバーライドする必要があります!importantと@import

出典

2011-10-03 21:54:34 Eric

@iを追加しようとしました最後にmportを実行すると、もうCSSはロードされません。私は使いたいとは思っていません！重要なのは、私が変えたいと思っているすべてが簡単な方法でなければならないので、それをしなければならないからです。 – Kenshi

を混乱しています。

CSSはどれが使用されるべきかを決定するために非常に厳密な優先順位を持っていますが、他のすべてが等しい場合、2つのスタイルが完全に同じ優先レベルを持つ場合、最後に指定されたものを使用します。これにより、後で同じセレクタを繰り返すだけでスタイルをオーバーライドすることができます。

唯一の例外は、最初のスタイルが!importantと指定されている場合です。この場合、オーバーライドするのはずっと難しくなります。 !importantという別のスタイルを指定しても、必ずしも機能しない場合があります（一部のブラウザでは動作するが、他のブラウザでは動作しない場合があります）。

したがって、以前のスタイルシートで!importantを使用した場合、それを上書きする際に問題が発生する可能性があります。しかしそうでなければ、それはかなり単純でなければならない。

出典

2011-10-03 22:00:29 Spudley

私にとってこのソリューションは完璧です。

main.cssのコピーを作成し、style.cssに名前を変更します。すべてのthats

@import url("style.css"); 
@import url("style-override.css");

：のmain.cssではすべて、過去を削除します。

あなたはまた、より具体的なクラス名を使用することができます

出典

2015-07-31 09:57:04

- たとえばあなただけのセレクタは最高ではありません資格過剰という、心に留めておく新しいCSSを使用

body div#sample { 
max-width: 75%; 
}

に

div#sample { 
max-width: 75%; 
}

を変更したい場合アイデア;）

出典

2016-09-06 09:42:25

メインスタイルシートをオーバーライドするために@importスタイルシートを取得するにはどうすればよいですか？

答えて

関連する問題