View in EnglishAlways switch to English

@import

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

* Some parts of this feature may have varying levels of support.

@importCSS @ 规则用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外；因为它不是一个嵌套语句，@import 不能在条件组的规则中使用。

因此，用户代理可以避免为不支持的媒体类型检索资源，作者可以指定依赖媒体的 @import 规则。这些条件导入在 URI 之后指定逗号分隔的媒体查询。在没有任何媒体查询的情况下，导入是无条件的。指定所有的媒体具有相同的效果。

语法

@import url;@import url list-of-media-queries;

其中：

url: 是一个表示要引入资源位置的<string> 或者<uri> 。这个 URL 可以是绝对路径或者相对路径。要注意的是这个 URL 不需要指明一个文件；可以只指明包名，然后合适的文件会被自动选择 (e.g.chrome://communicator/skin/).See here 了解更多。
list-of-media-queries: 是一个逗号分隔的媒体查询条件列表，决定通过 URL 引入的 CSS 规则在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入 URL 指明的 CSS 文件。

正规语法

@import =
  @import[<url>|<string>][layer|layer(<layer-name>)]?<import-conditions> ;

<layer-name> =
<ident>[ '.'<ident>]*

<import-conditions> =
[supports([<supports-condition>|<declaration>])]?<media-query-list>?

<supports-condition> =
not<supports-in-parens>|
<supports-in-parens>[and<supports-in-parens>]*|
<supports-in-parens>[or<supports-in-parens>]*

<supports-in-parens> =
  (<supports-condition>)|
<supports-feature>|
<general-enclosed>

<supports-feature> =
<supports-selector-fn>|
<supports-font-tech-fn>|
<supports-font-format-fn>|
<supports-at-rule-fn>|
<supports-named-feature-fn>|
<supports-decl>

<general-enclosed> =
[<function-token><any-value>?)]|
[ (<any-value>?)]

<supports-selector-fn> =
selector(<complex-selector>)

<supports-font-tech-fn> =
font-tech(<font-tech>)

<supports-font-format-fn> =
font-format(<font-format>)

<supports-at-rule-fn> =
at-rule(<at-keyword-token>)

<supports-named-feature-fn> =
named-feature(<ident>)

<supports-decl> =
  ([<declaration>|<supports-condition-name>])

<complex-selector> =
<complex-selector-unit>[<combinator>?<complex-selector-unit>]*

<font-tech> =
<font-features-tech>|
<color-font-tech>|
variations|
palettes|
incremental

<font-format> =
<string>|
collection|
embedded-opentype|
opentype|
svg|
truetype|
woff|
woff2

<complex-selector-unit> =
[<compound-selector>?<pseudo-compound-selector>*]!

<combinator> =
  '>'|
  '+'|
  '~'|
[ '|' '|']

<font-features-tech> =
features-opentype|
features-aat|
features-graphite

<color-font-tech> =
color-COLRv0|
color-COLRv1|
color-SVG|
color-sbix|
color-CBDT

<compound-selector> =
[<type-selector>?<subclass-selector>*]!

<pseudo-compound-selector> =
<pseudo-element-selector><pseudo-class-selector>*

<type-selector> =
<wq-name>|
<ns-prefix>? '*'

<subclass-selector> =
<id-selector>|
<class-selector>|
<attribute-selector>|
<pseudo-class-selector>

<pseudo-element-selector> =
  :<pseudo-class-selector>|
<legacy-pseudo-element-selector>

<pseudo-class-selector> =
  :<ident-token>|
  :<function-token><any-value>)

<wq-name> =
<ns-prefix>?<ident-token>

<ns-prefix> =
[<ident-token>| '*']? '|'

<id-selector> =
<hash-token>

<class-selector> =
  '.'<ident-token>

<attribute-selector> =
  '['<wq-name> ']'|
  '['<wq-name><attr-matcher>[<string-token>|<ident-token>]<attr-modifier>? ']'

<legacy-pseudo-element-selector> =
  :[before|after|first-line|first-letter]

<attr-matcher> =
[ '~'| '|'| '^'| '$'| '*']? '='

<attr-modifier> =
i|
s

示例

css

@import url("fineprint.css") print;@import url("bluish.css") projection, tv;@import "custom.css";@import url("chrome://communicator/skin/");@import "common.css" screen, projection;@import url("landscape.css") screen and (orientation: landscape);