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 嵌套来实现。

索引

规范

Specification
CSS Conditional Rules Module Level 3

参见