at-rule 是一个语句，它为 CSS 提供指令以执行操作或指示其行为方式。每个语句都以一个 @ 开头，紧跟着一个可用的关键字，该关键字充当 CSS 应该做什么的标识符。这是常见的语法，尽管每个 at-rule 都是它的变体。
常规规则
常规规则遵循常规语法
@[KEYWORD] (RULE);@charset
此规则定义浏览器使用的字符集。如果样式表包含非 ASCII 字符（例如 UTF-8），它会派上用场。请注意，放在 HTTP 标头上的 字符集将覆盖任何 @charset 规则。
@charset "UTF-8";@import
此规则插入文件的顶部，并指示样式表请求并包含一个外部 CSS 文件，就好像该文件的内容在该行所在的位置一样。
@import 'global.css';随着支持 @import 的 CSS 预处理器的流行，需要注意的是，它们的工作原理与原生 CSS @import 不同，后者是对该文件的单独 HTTP 请求。
@namespace
此规则对于将 CSS 应用于 XML HTML（XHTML）特别有用，以便 XHTML 元素可以用作 CSS 中的选择器。
/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);嵌套规则
嵌套规则包含一组额外的语句，其中一些语句可能取决于特定情况。
@[KEYWORD] {
/* Nested Statements */
}@document
此规则指定了应用于特定页面的样式的条件。例如，我们可以提供一个 URL，然后自定义该特定页面的样式。这些样式将在其他页面上被忽略。
@document
/* Rules for a specific page */
url(https://css-tricks.cn/),
/* Rules for pages with a URL that begin with... */
url-prefix(https://css-tricks.cn/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
/* Start styling */
body { font-family: Comic Sans; }
}截至撰写本文时，@document 的浏览器支持非常薄弱
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 否 | 否 | 有限 | 否 | 否 | 否 | 否 |
@font-face
此规则允许我们在网页上加载自定义字体。对自定义字体的 支持程度各不相同，但此规则接受创建和提供这些字体的语句。
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}了解更多关于 @font-face 的信息
@keyframes
此规则是 关键帧 动画 的基础，它允许我们标记动画的开始和结束（以及中间）标记，用于许多 CSS 属性。
@keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}了解更多关于 @keyframes 的信息
@media
该规则包含条件语句，用于将样式定向到特定屏幕。 这些语句可以包括屏幕尺寸，这对于 调整样式以适应设备 很有用
/* iPhone in Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.module { width: 100%; }
}或者仅在打印文档时应用样式
@media print {
}了解更多关于 @media 的信息
@page
此规则定义了在打印文档时应用于各个页面的样式。 它特别包含伪元素，用于为:first页面以及页面的:left和:right边距设置样式。
@page :first {
margin: 1in;
}@property
CSS 变量已经存在一段时间了。我们可以很容易地为我们经常使用的任何值（如颜色）定义它们。
:root {
--primary-color: oklch(70% 0.183 42.88);
}
body {
color: var(--primary-color);
}当然，这很棒。但这并不全是闪光和独角兽。例如，不可能在两个变量之间进行动画，比如渐变的颜色。你可能会认为可以通过像这样为颜色函数中的色调设置一个变量来旋转整个色轮
:root {
--hue: 0;
}
body {
animation: hue 5s linear infinite;
background-color: hsl(var(--hue) 80% 50%);
}
@keyframes hue {
0% { --hue; }
100% { --hue: 360; }
}这看起来当然有效！但这行不通。这是因为 CSS 将该数字识别为字符串而不是实际数字。我们必须注册一个名为**自定义属性**的东西才能将它们连接起来。
这就是@property的用武之地。它不仅用于注册 CSS 变量，还用于定义其类型、初始值（默认值）以及它是否从其他属性继承值。它就像为特定类型的数据定义我们自己的规范一样！
回到那个动画渐变，让我们设置我们的自定义属性
@property --hue {
syntax: "<number>";
initial-value: 0;
inherits: false;
}现在我们实际上可以使用--hue在0deg和360deg之间绕整个色轮旋转
body {
animation: hue 5s linear infinite;
background-color: hsl(var(--hue) 100% 50%);
}
@keyframes hue {
0% { --hue; }
100% { --hue: 360; }
}请参阅文章“插值数值 CSS 变量”以详细了解@property的工作原理，以及动画渐变的演示。
了解更多关于 @property
@supports
此规则测试浏览器是否支持某个功能，如果条件满足，则为这些元素应用样式。它有点像Modernizr，但专门针对 CSS 属性。
/* Check one supported condition */
@supports selector(::thumb) {
/* If ::thumb is supported, style away! */
}
/* Check multiple conditions */
@supports (color: oklch(50% .37 200)) and (color: color-mix(white, black)) {
background-color:
}not 运算符是一种检查浏览器是否 *不支持* 某个功能的方法，以便在这些情况下设置回退样式。
.element {
color: oklch(50% .37 200);
}
/* If the oklch() color function is not support, set a fallback color */
@supports not (color: oklch(50% .37 200)) {
.element {
color: #0288D1;
}
}以下是 @supports 的支持情况
| Chrome | Edge | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|---|
| 28+ | 12+ | 9+ | 22+ | 12.1+ | 否 | 4.4+ | 9+ |
了解更多关于 @supports 的信息
@container
此 at-rule 于 2023 年 2 月随着容器查询的发布而引入，容器查询是一种允许你将元素注册为 container 并根据容器满足特定条件时对其他元素应用样式的功能。它与 @media 查询非常相似，但 @container 查看的是特定元素，而不是视窗大小。
.parent {
container: article / inline-size;
}
.child {
display: flex;
}
@container article (width > 800px) {
.child {
flex-direction: column;
}
}了解更多关于容器查询的信息
总结
@规则 是让 CSS 做一些疯狂而有趣的事情的关键所在。虽然这里列出的示例比较基本，但我们可以看到它们如何用于针对非常具体的条件手工制作样式，从而创建符合特定场景的用户体验和交互。
可能需要补充的是，‘@import’ 必须出现在除 @charset 之外的所有其他类型规则之前 - 如果你不知道这一点，很容易浪费大量时间；)
https://mdn.org.cn/en-US/docs/Web/CSS/@import
没错。确实如此 - 我已经添加了一条关于这方面的说明。
大家喜欢用什么方式来做打印样式？是在你的主样式表中使用 @print 并节省一个 HTTP 请求？还是创建一个单独的打印样式表来减少基础样式表的大小？
我想打印样式的数量会决定哪种方法更好，比如，只需要很少的样式就可以放在你的样式表中，而更复杂的打印布局则需要很多样式，最好放在单独的文件中。还有其他需要考虑的因素吗？
无论哪种方式，浏览器都会下载两者，所以你最好把它们放在一起。而且打印样式通常比基础样式要小，至少我的经验是这样。
如果你使用预处理器，你可以创建一个 _print.scss 部分来存放打印样式，并用
@media print{}包裹起来。最终它们应该都合并到一个文件中，以避免多次请求，因为在链接上设置 media=”print” 并不会阻止浏览器下载打印样式。了解 @charset 实际上并没有被解析为规则很好。解析器只是检查文件是否以“@charset …;” 序列开头。
这意味着你不能在声明中使用单引号或空格，并且它必须是第一个声明（甚至在 @import 规则之前）。
http://www.w3.org/TR/css-syntax-3/#charset-rule
我之前不知道 @document 规则。我得记住这一点。这对于为不同页面设置样式来说是 WordPress 中 body 类的一个很好的替代方案。
我不喜欢它 - 对我来说，这是一个关注点分离问题。
我建议谨慎使用 - 你总是可以更改类，但更改网站的 URL 结构并不总是那么容易。
这篇文章没有真正提及浏览器支持，但根据 MDN 的说法，
@document已经被推迟到 CSS4，并且只有 Firefox 在使用-moz-前缀的情况下才支持它… https://mdn.org.cn/en-US/docs/Web/CSS/@document@Qbe Root，不存在 CSS4：http://www.xanthir.com/b4Ko0
我希望 Chrome 支持
@document:/https://mdn.org.cn/en-US/docs/Web/CSS/@document#Browser_compatibility
我对此非常兴奋，直到我阅读了关于它的支持……总有一天！
同意！
@document缺乏支持真令人沮丧。我已经更新了帖子以显示当前支持情况，这样我们不会制造太多兴奋。:)嘿，Chris，我认为你在 @import 部分有一个拼写错误。除非预处理器确实存在，而我只是脱离了时代 :)
感谢提醒！已修复。:)
我以为预处理器是用来做一些疯狂的事情的？
感谢分享这篇很棒的文章，我发现它对我的一个网页设计项目非常有帮助。