1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 布局
  4. Syntax
  5. At 规则

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

At 规则

At 规则是一个 CSS 语句，用来指示 CSS 如何运行。以 at 符号开头，'@'（U+0040 COMMERCIAL AT），后跟一个标识符，并包括直到下一个分号的所有内容，';'（U+003B SEMICOLON），或下一个 CSS 块，以先到者为准。

语法

规则

css
/* 一般结构 */
@identifier (RULE);

/* 示例：通知浏览器使用 UTF-8 字符集 */
@charset "utf-8";

下面是一些 at 规则，由它们的标示符指定，每种规则都有不同的语法：

  • @charset——定义样式表使用的字符集。
  • @import——告诉 CSS 引擎引入一个外部样式表。
  • @namespace——告诉 CSS 引擎必须考虑 XML 命名空间。

嵌套

css
@identifier (RULE) {
}

嵌套 at 规则，是嵌套语句的子集，不仅可以作为样式表里的一个语句，也可以用在条件规则组里：

  • @media——如果满足媒介查询的条件则条件规则组里的规则生效。
  • @supports——如果满足给定条件则条件规则组里的规则生效。
  • @document——如果文档样式表满足给定条件则条件规则组里的规则生效。（推迟至 CSS Level 4 规范）
  • @page——描述打印文档时布局的变化。
  • @font-face——描述将下载的外部的字体。
  • @keyframes——描述 CSS 动画的中间步骤。
  • @counter-style——定义不属于预定义样式集的特定计数器样式。（在候选推荐阶段，仅在 Gecko 中实现）
  • @font-feature-values（加上 @swash、@ornaments、@annotation、@stylistic、@styleset 和 @character-variant）——在 font-variant-alternates 中定义通用名称，以便在 OpenType 中以不同方式激活功能。（在候选推荐阶段，仅在 Gecko 中实现）
  • @property ——描述自定义属性和变量。（目前处于工作草案阶段）
  • @layer——声明一个级联层，并在有多个级联层时定义优先顺序。

条件规则组

就像属性值那样，每条 at 规则都有不同的语法。不过一些 @规则可以归为一个特殊的分类：条件规则组。这些语句使用相同的语法。它们都可以包括 嵌套语句——规则集或者是嵌套 at 规则。它们都表达：它们所指的条件 (类型不同) 总等效于 true 或者 false，如果为 true 那么它们之中的语句生效。

条件规则组由 CSS Conditionals Level 3 定义：

既然条件规则组可以嵌套语句，那么嵌套层级不定。

使用 CSS 嵌套来嵌套 @layer

级联层可以嵌套以创建嵌套层。它们用 .（点）连接。这也可以使用 CSS 嵌套来实现。

索引

规范

规范
CSS Syntax Module Level 3

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题