web-dev-qa-db-ja.com

@importが機能しないCSSスタイルのオーバーライド

@importでスタイルをオーバーライドすることについて、同様の質問をいくつか見ました。人々は@importを一番下に置くことを提案していますが、ここではうまくいかないようです。

--- index.html ---
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
This text should be green.
</body>

--- style.css ---
body {color: red;}
@import url('style-override.css');

--- style-override.css ---
body {color: green;}

上記の例では、赤テキストが出力されますが、緑が期待されます。

  • ヘッド内のstyle.cssの後にstyle-override.cssを宣言すると問題は解決しますが、@ import inside cssファイルを使用したいと思います。

  • Style-override.cssに！importantを追加しても期待どおりの結果が得られますが、それは正常に機能する方法ではありません。

誰かがこれを説明できますか？

cssimportoverriding
19
user1643156

スタイルシート内で宣言されたインポートルールは他のすべての前に来る必要があるため、これは機能しません-そうでなければ...まあ、それは機能しません;）。

したがって、style.cssスタイルシートに含める必要があるのは次のとおりです。

@import url('style-override.css');  
body {color: red;}
30
banzomaikaka

@importルールはtopにある必要があります。これは CSS仕様 がそれについて言っていることです：

@importルールは、スタイルシート内の他のすべてのat-rulesおよびスタイルルールの前に置く必要があります（@charsetは、存在する場合はスタイルシートの最初のものである必要があります）。そうでない場合、@ importルールは無効です。

16
luissquall