@import

@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;

where

url

是一个 <string>，一个 <url>，或一个 url() 函数，表示要导入的资源的位置。URL 可以是绝对的或相对的。

list-of-media-queries

是一个用逗号分隔的 媒体查询 列表，它指定了应用链接 URL 中定义的 CSS 规则的媒体相关条件。如果浏览器不支持任何这些查询，它将不加载链接的资源。

layer-name

是一个 级联层 的名称，将链接资源的内容导入到其中。

supports-condition

表示浏览器必须支持的功能，以便导入样式表。如果浏览器不符合*supports-condition*中指定的条件，它可能不会获取链接的样式表，即使通过其他路径下载，也不会加载它。supports() 的语法与 @supports 中描述的语法几乎相同，该主题可以用作更完整的参考。

导入的规则必须在所有其他类型的规则之前，除了 @charset 规则和创建层的 @layer 语句。

* {
  margin: 0;
  padding: 0;
}
/* more styles */
@import url("my-imported-styles.css");

由于@import at-rule 在它无效的样式之后声明，因此它被忽略。

@import url("my-imported-styles.css");
* {
  margin: 0;
  padding: 0;
}
/* more styles */

@import 规则不是一个 嵌套语句。因此，它不能在 条件组 at-rule 中使用。

为了使 用户代理 避免检索不支持媒体类型的资源，作者可以指定媒体相关的导入条件。这些条件导入在 URL 后指定用逗号分隔的 媒体查询。在没有媒体查询的情况下，导入不依赖于使用的媒体。为list-of-media-queries 指定all具有相同的效果。

类似地，用户代理可以在@import at-rule 中使用supports() 函数，仅在特定功能集受支持（或不受支持）时才获取资源。这使作者能够利用最近引入的 CSS 功能，同时为旧版本的浏览器提供优雅的回退。请注意，可以在 JavaScript 中使用 CSSImportRule.supportsText 获取@import at-rule 的supports() 函数中的条件。

@import 规则也可以用于通过从链接资源导入规则来创建 层叠层。 规则也可以导入到现有的层叠层中。为此，@import 使用 layer 关键字或 layer() 函数。来自导入样式表的样式规则中的声明将与它们在导入点直接写入样式表一样，与层叠交互。

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

<url> = 
  <url()>  |
  <src()>  

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

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

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<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-decl>  

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

<supports-decl> = 
  ( <declaration> )  

@import "custom.css";
@import url("chrome://communicator/skin/");

以上两个示例展示了如何将 url 指定为 <string> 和 url() 函数。

@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);

上面示例中的 @import 规则展示了媒体相关条件，这些条件必须为真才能应用链接的 CSS 规则。例如，最后一个 @import 规则仅在横向屏幕设备上加载 landscape.css 样式表。

@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports((not (display: grid)) and (display: flex))
  screen and (max-width: 400px);

上面的 @import 规则说明了如何导入使用网格的布局（如果支持 display: grid），否则导入使用 display: flex 的 CSS。虽然只能有一个 supports() 语句，但可以将任意数量的功能检查与 not、and 和 or 结合使用。但是，在混合使用时，必须使用括号定义优先级，例如 supports((..) or (..) and not (..)) 是无效的，但 supports((..) or ((..) and (not (..)))) 是有效的。请注意，如果只有一个声明，则无需将其包装在额外的括号中：这在上面的第一个示例中有所体现。

上面的示例展示了使用简单声明语法支持条件。您也可以在 supports() 中指定 CSS 函数，如果它们受支持并且可以在用户代理上评估，则它将评估为 true。例如，下面的代码展示了一个 @import，它取决于 子代组合器 (selector()) 和 font-tech() 函数。

@import url("whatever.css")
supports((selector(h2 > p)) and (font-tech(color-COLRv1)));

@import "theme.css" layer(utilities);

在上面的示例中，创建了一个名为 utilities 的层叠层，它将包含来自导入的样式表 theme 的规则。

@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

在上面的示例中，headings.css 和 links.css 样式表中的规则与 audio[controls] 规则在同一层中进行层叠。

@import "theme.css" layer();
@import "style.css" layer;

这是一个创建两个独立的无名层叠层并将链接规则分别导入到每个层叠层的示例。没有声明名称的层叠层是无名层叠层。无名层叠层在创建时被最终确定：它们不提供任何重新排列或添加样式的方法，也不能从外部引用。

• @media
• @supports
• CSS 层叠与继承 模块