22

@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を宣言すると問題は解決しますが、cssファイル内で@importを使用したいと思います。

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

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

4

2 に答える 2

51

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

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

@import url('style-override.css');  
body {color: red;}
于 2012-09-08T11:23:03.553 に答える
21

@importルールは一番上にある必要があります。これがCSSの仕様です。それについて言う：

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

于 2014-06-24T15:37:51.007 に答える