Переопределение CSS-стилей с @import не работает

Я видел некоторые похожие вопросы об переопределении стилей с @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-override.css после того, как style.css внутри главы решит проблему, но я хочу использовать файл @import внутри css файла.
Добавление ! important в style-override.css также получит ожидаемый результат, но это не так, как должно работать.

Кто-нибудь может это объяснить?

Ответ 1

Это не работает, потому что любое правило импорта, объявленное внутри таблицы стилей, должно появляться перед всем остальным - иначе... ну, это не работает;).

Итак, что вы должны иметь в таблице стилей style.css:

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

Ответ 2

@import правила должны быть наверху. Об этом говорит спецификация CSS.

Любые правила @import должны предшествовать всем другим правилам правил и стиля в таблице стилей (кроме @charset, которая должна быть первой в таблице стилей, если она существует), иначе правило @import недействительно.