CSS @import 和它的顺序 [英] CSS @import and the order of it

问题描述

是否可以在这样的一个 css文件中使用@import.

Is it possible to use @import in one css file like this.

@import file1
some css here
@import file2

chrome 无法识别上述的第二次导入，但这会起作用

chrome doesn't recognize the second import for the above but this will work

@import file1
@import file2
some css here

这里的问题是我需要一些 css"在中间，因为 file2 会覆盖其中的一些.除了从 html 导入 3 个文件之外，还有其他解决方案吗?

The problem here is I need "some css" to be in the middle because file2 will override some of them. Is there any other solution other than importing 3 files from html?

推荐答案

那是不可能的:

来自 http://www.w3.org/TR/CSS21/cascade.html#at-import:

'@import' 规则允许用户从其他样式表导入样式规则.在 CSS 2.1 中，任何 @import 规则都必须在所有其他规则之前(@charset 规则除外，如果存在).

The '@import' rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present).

来自 http://www.w3.org/TR/CSS21/syndata.html#at-rules:

假设，例如，CSS 2.1 解析器遇到这种样式工作表:

Assume, for example, that a CSS 2.1 parser encounters this style sheet:

@import "subs.css";
h1 { color: blue }
@import "list.css";

根据 CSS 2.1，第二个 '@import' 是非法的.CSS 2.1解析器忽略整个规则，有效减少样式表到:

The second '@import' is illegal according to CSS 2.1. The CSS 2.1 parser ignores the whole at-rule, effectively reducing the style sheet to:

@import "subs.css";
h1 { color: blue }

<小时>但是不需要在 @import 之间定义规则.如果您想覆盖文件 1 中的属性，也可以在 @import 块之后添加它们.文件 2 中被覆盖的属性可以省略.

---

There is no need to define the rules between the @imports though. If you want to override properties in file 1, they can also be added after the @import blocks. Properties which are overridden in file 2 can be omitted.

这篇关于CSS @import 和它的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！