@规则：其他
CSS @规则是以 @ 符号开头的语句，后跟标识符。语句结束条件：遇到分号 ; 或者 CSS 代码块 {}，以先到者为准。
其他 @规则：
@charset：设置样式表字符编码；@import：导入外部样式表；@namespace：处理 XML、SVG 命名空间；@supports：浏览器 CSS 特性检测（特征查询）；@layer：层叠层，控制 CSS 层叠优先级；@page：打印分页布局设置。
@charset
@charset 规定 CSS 样式表文件的字符编码。
语法约束：
- 必须放在样式表最开头，前面不能有任何字符、空格、注释；
- 不能嵌套在其他 @规则条件块内部；
- 多张
@charset声明，仅第一个生效； - 不能写在 HTML 的
<style>标签内。
浏览器编码判定优先级（从上往下匹配，命中即停止）：
- 文件 Unicode BOM 字节标记；
- HTTP 响应头
Content-Type的 charset； - CSS
@charset规则； - HTML
<link>的 charset 属性（HTML5 已废弃）； - 默认回退：
UTF-8。
必须使用双引号，@charset 和字符串之间仅允许一个空格，末尾分号：
/* 合法，大小写不敏感 */
@charset "UTF-8";
@charset "utf-8";
/* 非法示例 */
@charset 'UTF-8'; /* 单引号不允许 */
@charset "UTF-8"; /* 多于一个空格 */
@charset "UTF-8"; /* 开头存在空格 */
@charset UTF-8; /* 缺少引号 */
@import
用于导入外部 CSS 样式表。
语法约束：
- 位置：必须写在所有样式、其他 @规则之前，仅允许在
@charset之后；如果使用@layer，@import 也可以写在层定义内部； - 不能嵌套在
@media、@supports等条件规则块内部； - 支持附加媒体查询条件，做条件导入；
- 性能提示：
@import会阻塞样式解析，生产环境优先使用构建工具合并 CSS，不建议大量使用。
@import url;
@import url 媒体查询列表;
@import url supports(特征查询);
@import url supports(特征查询) 媒体查询列表;
@import "common.css";
@import url("print.css") print;
@import url("speech.css") speech;
@import url("landscape.css") screen and (orientation: landscape);
@namespace
为样式表定义 XML 命名空间；主要用于 HTML 内联 SVG、MathML、XML 文档，限定选择器只匹配指定命名空间下的元素。
语法约束：书写顺序 @charset → @import → @namespace → 其余样式与 @规则。
HTML5 自动分配命名空间：
- HTML 元素：默认 XHTML 命名空间
http://www.w3.org/1999/xhtml； - SVG：
http://www.w3.org/2000/svg； - MathML：
http://www.w3.org/1998/Math/MathML。
/* 默认命名空间 */
@namespace url(XML-namespace-URL);
/* 带前缀命名空间 */
@namespace 前缀名 url(XML-namespace-URL);
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* 匹配 XHTML 的 <a> */
a {}
/* 匹配 SVG 内部的 <a> */
svg|a {}
/* 匹配任意命名空间下的 <a> */
*|a {}
@supports
检测浏览器是否支持某项 CSS 语法/特性，条件成立则块内样式生效；支持写在顶层，也可以嵌套在其他条件 @规则内部。
语法：表达式放在圆括号内；支持逻辑运算符 not、and、or；支持 selector() 检测选择器兼容性。
@supports (transform-origin: 5% 5%) {}
@supports not (transform-origin: 10em 10em 10em) {}
@supports (display: grid) and (gap: 10px) {}
@supports (transform) or (-webkit-transform) {}
@supports selector(:is(.a, .b)) {}
JS 中做同样的特性检测，返回布尔值（IE11及以下不支持）：
CSS.supports("display", "grid");
CSS.supports("(display: grid)");
CSS.supports("(--my-var: #fff)");
@layer
@layer 用于定义层叠层（cascade layer），用来控制 CSS 层叠优先级，解决样式覆盖冲突。
层优先级规则：后定义的层 > 先定义的层；未归入任何层的样式，优先级高于所有命名层。
声明层名称（预定义层顺序）：
/* 预先定义层顺序，优先级：base < components < utils */
@layer base, components, utils;
直接在层内写样式：
@layer base {}
@layer components {}
@layer utils {}
@import 导入样式到指定层：
@import url("./base.css") layer(base);
@layer 嵌套层：@layer A { @layer B {} } 会生成嵌套层全名 A.B，也可以外部直接使用点语法 @layer A.B {} 追加样式。
嵌套层普通样式（无 !important）：
- 在同一个父层内部：父层直接书写的样式 ＞ 父层内所有嵌套子层；
- 同级嵌套子层之间：后定义子层 ＞ 先定义子层；
- 所有嵌套子层，仍然属于命名层，优先级低于全局未分层普通样式。
嵌套层样式带 !important：
- 同级嵌套子层之间：优先级反转，先定义子层
!important＞ 后定义子层!important； - 父层直接写的
!important＞ 内部子层!important； - 嵌套子层的
!important依旧属于层内!important，整体优先级高于全局未分层!important。
@layer components {
@layer button {}
}
注意：层之间比较时，!important 层顺序颠倒：先定义层的 !important > 后定义层的 !important。
注意：所有层内 !important 声明，优先级高于层外（未分层）!important 声明；层外普通声明，优先级高于层内普通声明。
@page
用于打印场景，修改打印页面布局；仅少数属性可用：margin、size、marks、bleed，其余属性全部忽略。
@page 四个描述符：
- margin：打印页面的页边距，控制页面内容区域距离纸张四边的空白；支持简写、分四边设置，单位常用
mm、cm、in，不支持百分比。 - size：设置纸张尺寸与方向，可以用标准纸张关键字，也可以写自定义宽高；支持
portrait（纵向，默认）、landscape（横向）。 - marks：印刷标记，在页面盒子外部绘制印刷辅助线；仅用于印刷出 PDF，普通办公打印一般用
none。crop：裁切标记，页面四角短线，标记纸张实际裁切位置。cross：套准十字标记，多色印刷用来对齐各色版。
- bleed：出血位，定义页面盒子向外延伸多少毫米。印刷时背景、图片超出裁切线，防止裁切后边缘出现白边。
@page {
size: A4 landscape;
margin: 15mm;
marks: crop cross;
bleed: 3mm;
}
支持 @page 伪类：
:first：文档打印第一页；:left：打印所有左侧页面；:right：打印所有右侧页面；:blank：空白页；
@page :first {
margin: 2cm;
}