---
description: 两种 CSS 语句：规则集和 At-rule
---

# CSS At-rule

CSS 里的绝大部分内容都是规则集，即选择器和`属性:值`的集合。

当然，也有一些功能是规则集覆盖不到的，比如开发者想在样式表里指定字符集、字体、列表计数器等信息，或是想导入外部样式表。要想实现上述功能，就得用到 CSS 里的另一种语句了。

CSS 语句是一个构建块，它以任何非空格字符开始，以 `}` 或 `;` 结束。有两种类型的 CSS 语句，分别是规则集和 At-rule。任何不是规则集也不是 At-rule 的语句都是无效的，会被忽略。

![](https://2598460105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGNkDWo1TzHEOBRUxCRfy%2Fuploads%2FpV5HphTWZ5UlplrDO8vk%2Fcss2.png?alt=media\&token=64566725-387c-4a4c-a09b-5889b5166a99)

> 还有一组语句叫嵌套语句，它们可以用在部分 At-rule 里，比如条件组的规则。此外，[《CSS Nesting Module》](https://www.w3.org/TR/css-nesting-1/) 规范也列出了 CSS 原生嵌套的功能，目前尚处于工作草案阶段，更多详情可查阅历史文章[《CSS 的原生嵌套》](https://github.com/anjia/blog/issues/1)。

这部分将介绍 At-rule 语句。

## At-rule（29个）

At-rule 以 `@` 开始，后面跟一个标识符，然后一直持续到语句末尾，要么是 `}` 要么是 `;`。

每种 At-rule 的类型由其标识符定义的，它们都有自己的内部语法和语义。At-rule 可以用来传达元数据信息（如`@charset`, `@import`）、条件信息（如`@media`）和描述性信息（如`@font-face`）等。

### 1. 元数据（3个）

<table><thead><tr><th width="233">At-rule</th><th>说明</th></tr></thead><tbody><tr><td><code>@charset</code></td><td>字符集（均为非嵌套语句）</td></tr><tr><td><code>@import</code></td><td>外部导入</td></tr><tr><td><code>@namespace</code></td><td>定义 XML 命名空间</td></tr></tbody></table>

### 2. 条件组（4个）

<table><thead><tr><th width="232">At-rule</th><th>说明</th></tr></thead><tbody><tr><td><code>@media</code></td><td>媒体查询</td></tr><tr><td><code>@supports</code></td><td>特性查询</td></tr><tr><td><code>@container</code></td><td>容器查询</td></tr><tr><td><code>@document</code>（已废弃）</td><td>根据 URL</td></tr></tbody></table>

### 3. 动画（2个）

<table><thead><tr><th width="232">At-rule</th><th>说明</th></tr></thead><tbody><tr><td><code>@keyframes</code></td><td></td></tr><tr><td><code>@scroll-timeline</code></td><td></td></tr></tbody></table>

### 4. 字体（9个）

<table><thead><tr><th width="249">At-rule</th><th>相关规则</th></tr></thead><tbody><tr><td><code>@font-face</code></td><td></td></tr><tr><td><code>@font-feature-values</code></td><td><code>@swash</code><br><code>@annotation</code><br><code>@ornaments</code><br><code>@stylistic</code><br><code>@styleset</code><br><code>@character-variant</code></td></tr><tr><td><code>@font-palette-values</code></td><td></td></tr></tbody></table>

### 5. 打印（5个）

<table><thead><tr><th width="205">At-rule</th><th>相关规则</th></tr></thead><tbody><tr><td><code>@page</code></td><td><code>@top-center</code><br><code>@bottom-center</code><br><code>@left-bottom</code><br><code>@right-bottom</code></td></tr></tbody></table>

### 6. 其它（4个）

<table><thead><tr><th width="206">At-rule</th><th>说明</th></tr></thead><tbody><tr><td><code>@counter-style</code></td><td>可用在 <code>list-style</code>,<code>counter()</code>, <code>counters()</code></td></tr><tr><td><code>@color-profile</code></td><td>可用在 <code>color()</code></td></tr><tr><td><code>@property</code></td><td>CSS Houdini</td></tr><tr><td><code>@layer</code></td><td>级联层</td></tr></tbody></table>

### 7. 已废弃（2个）

* `@viewport`（已废弃） 配置视口
* `@historical-forms`

## 扩展阅读

* [https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule)
* [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

```javascript
// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
let ruleArr = [], descriptorArr = [];
document.querySelectorAll(".index code").forEach(item => {
  let code = item.innerText;
  if (/^\@/.test(code)) ruleArr.push(code);
  else if (/\@/.test(code)) descriptorArr.push(code);
});
console.log(ruleArr.length, descriptorArr.length); // 25, 44
```
