◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。
这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。
@import 主要用于从其他样式表导入新的样式规则，语法：@import url|string list-of-mediaqueries;。
@import "./reset.css"; @import url("./reset.css") 当使用条件判断时，可以使用媒体查询条件。
/* 宽度小于1000px才会生效 */ @import "./reset.css" screen and (max-width: 1000px);
另外，当在html文件或样式文件中使用该语法(不使用现代框架)，有两点需要注意：
<style>区块的头部，前面不可以出现其他css样式，但可以在@charset 后面。当使用vue等框架的时候，则可以在 @import 前出现css样式，也能在条件嵌套语法中使用，是因为导入的样式资源会被解析具体的样式到页面上。
@font-face 用于加载自定义字体。属于目前前端比较常用的语法，也有多开源的字体图标库可以使用。
既支持提供字体资源文件路径进行加载，也支持用户本地安装的字体加载。
@font-face { font-family: "iconfont"; src: url('https://at.alicdn.com/t/font_....ttf?t=1545807318834'); } @font-face { font-family: "iconfont"; src: url('./font_985780_km7mi63cihi.ttf?t=1545807318834'); } 如上，就是一个加载字体资源的示例，一个加载cdn上的地址，一个加载本地文件。
@font-face 定义了一个CSS区块，有多个属性取值：
url()：加载字体资源文件；
local()：加载本地电脑字体名称，如 src: local("Arial");；
@font-face { font-family: "sys-Arial"; src: local("Arial"); font-weight: normal; } 如上，使用local加载当前电脑系统的字体名称。
@charset 为样式表文件指定所需要使用的字符编码，只能在CSS文件中使用，语法：@charset "charset";。
@charset "UTF-8";
特点：
<style>区块或元素内样式属性中使用。浏览器解析样式表文件使用字符编码的顺序：
@keyframes 通过定义动画序列中的关键帧的样式，用来控制CSS动画的中间步骤。
语法定义：@keyframes animationname { keyframes-selector { css-styles; } }。
百分比：0% - 100%，时间百分比的节点
from和to：from等同起始时间from，to等同结束时间
@keyframes dropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes wave { 0% { transform: translateY(0); } 45% { transform: translateY(-100%); } 100% { transform: translateY(0); } } 如上，使用两种方式定义的关键帧动画样式。
特性说明：
!important 限定样式会被忽略，不起作用。为了获得最佳动画体验，应该始终定义开始和结束状态。
@media 媒体查询，是基于不同的媒体查询结果定义不同的样式。多用于针对不同屏幕尺寸进行差异化的样式设置，做一些响应式页面设计。另外，如果缩放浏览器的大小，也可以根据查询宽高重新渲染页面样式等。
语法： @media mediatype and|not|only (media feature) { CSS-Style; }。
说明：
mediatype：媒体类型，描述设备类别，一般有 all、print、screen、speech，默认all：
媒体特性(media feature)：描述设备、环境的具体条件特征；必须使用括号括起来，常用的有：
逻辑操作符：and、not、only、，：
or; @media screen (max-width: 1000px) { div { background-color: red; } } /*或者嵌套*/ @media screen { @media (max-width: 1000px) { div { background-color: red; } } } 如上示例，即是我们经常使用的方式。
@media 媒体查询也能作为 @import 的条件使用，可见上面已有介绍。
在引入样式表的 <link> 语句中，也可以使用媒体查询，根据不同的条件加载不同的样式文件：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="./reset.css"> <link rel="stylesheet" media="screen and (max-width: 1000px)" href="./reset.css">
在 <style> 样式区块也可以使用媒体查询：
<style media="screen and (max-width: 1000px)"> div { background-color: red; } </style> 使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。
使用方式：
// 获取媒体查询MediaQueryList对象，有matches const screenMediaQueryList = Window.matchMedia('(max-width: 1000px)') console.log(1, screenMediaQueryList) // matches: true -- 当前媒体查询规则已生效，为false则不生效 // media: "(max-width: 1000px)" screenMediaQueryList.addEventListener('change', (res) => { console.log(2, res) }) 可以获取当前是否已使用该媒体查询规则，或者监听媒体查询状态的变化事件。
以下是一些使用较少的@规则。
@supports 用于指定依赖于浏览器一个或多个特定CSS功能的支持申明。常用来判断当前浏览器是否支持某个CSS特性功能，所以又被称为特性查询。
ie不支持。
如判断自定义属性，详见自定义属性知识介绍。
@supports ((--a: 0)) { /* 支持自定义属性 */ } @supports (not (--a: 0)) { /* 不支持自定义属性 */ } 语法，由一组样式声明和一条支持条件构成，支持条件可以是多条，可以使用 and、or、not 等进行结合处理；还可以使用圆括号调整优先级。
/* 浏览器支持grid */ @supports (display: grid) { div {} } /* 不支持grid */ @supports not (display: grid) { } /* 不支持gri和flex */ @supports not ((display: grid) and (display: flex)) { } ◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。