&nbs p;
大家可能在 CSS 中见到过字符 @ 然后加一些关键字的用法，这种用法就称之为AT规则，在CSS中，种类还是很多的，这里总结列举下。
常规规则
所谓“常规规则”指的是语法类似下面的规则：
@[KEYWORD] (RULE);
包括：
@charset定义字符集。字符设置据说会被HTTP头覆盖。
某些软件，例如Dre am weaver新建CSS文件时候，自动会带有下面所示代码，但实际开发时候，作用不大，因为meta中已经有所设置( < ;m eta charset="utf-8"> )，会覆盖，所以我都是直接删掉的。
@charset "utf-8";@import
导入其他CSS样式文件。实际上线时候，不建议使用，多请求，阻塞加载之类。但，本地开发可以使用，用做CSS模块化开发，然后使用一些(如grunt)工具进行压缩并合并。但是呢，相比less, sass等还是有不足，就是 @import 语句只能在CSS文件顶部，使得文件的前后关系控制，就不那么灵活。
@import 'global.css';@ names pace
此规则应用到 XM L HTML (XHT ML )上特别有用，因为这样的话XHTML元素可以作为选择器在CSS中使用。
/* XHTML命名空间 */ @namespace url(http://www.w3. org /1999/xhtml); /* 内嵌在XHTML的SVG的命名空间 */ @namespace svg url(http://www.w3.org/2000/svg);
嵌套规则
所谓“嵌套规则”，就是带有花括号 {} , 语法类似下面的规则：
@[KEYWORD] { /* 嵌套语句 */ } 包括：
@documentCSS 4.0规范有相关说明。如果文档满足给定的一些条件，就可以应用我们指定的一些样式。比如说，这个CSS文件被子站A调用，和被子站C调用，我们可以通过域名匹配来执行不同的CSS样式。这样，我们可以有效避免冲突， 或者 防 止 外链 之类。
@document /* 页面URL需要是 */ url(http://www.zhangxinxu .COM /), /* 页面URL的开头必须是 .. . */ url- PR efix(www.zhangxinxu.com/word Press /), /* 该域上的所有页面 */ dom ai n(zhangxinxu.com), /* 所有https协议页面 */ rege xp ("https:.*") { /* 开始 样式 */ body { font-f ami ly: Comic Sans; } } 由于这个AT规则是CSS4水平的，所以目前的浏览器支持情况很弱，只有FireFox浏览器支持，而且还需要加前缀。但是，10年之后，也就是2025年再来看，估计就是另外一番景象了。 @font-face
这个大家可能比较熟，自定义字体用的。IE6也支持。目前相关 文章 也挺多，就不啰嗦，放个示意：
@font-face { font-family: 'MyWebFont'; src: url('myfont.wof f2 ') format('woff2'), url('myfont.woff') format('woff'); } @keyframes 喜欢CSS3的 同学 这个也耳熟能详了， 输入法 打出来发现居然是“详”而不是“翔”， 原来 不是“听得太多耳朵都能拉出屎来”的 意思 哦，学习了！
用来声明CSS3 animation动画关键帧用的，一笑而过：
@keyframes fad ei n { 0% { opac IT y: 0; } 100% { opacity: 1; } } @media 媒介查询，解释非常常用的。响应式 宽 度啊，retina屏幕判断啦，打印屏幕啦，甚至IE7,IE8浏览器的hack啦，很多，本文标题是 了解 ，不深入，给大家 简单 演示下使用就好了：
@media all and (min-width: 1280px) { /* 宽度大于1280干嘛干嘛嘞... */ }
@media (- webkit -min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { /* Retina屏幕干嘛干嘛嘞... */ }
@media print { /* 闪开闪开，我要打印啦！ */ }
@media /0screen/,screen/9 { /* IE7,IE8干嘛干嘛嘞... */ }
@media screen/9 { /* IE7干嘛干嘛嘞... */ } @page 这个规则用在打印文档时候修改一些 CSS属性 。使用 @page 我们只能 改变 部分CSS属性，例如间距属性 m arg in , 打印相关的 orphans , widows , 以及 page- br eak-* , 其他CSS属性会被忽略。
@page : First { mar gin : 1in; } 上面CSS表示 :first 页面也要有 :left , :right 页面 margin 间距。 zxx: // @page 的 伪类 包括： :blank , :first , :left , :right 。 @supports
是否 支持某CSS属性声明的AT规则，浏览器对齐支持性越来越好了，鄙人已经在实际项目中使用了这个规则，干嘛用呢？说来惭愧，当作hack使用了。具体 细节 不表。下面是一些使用示意：
/* 检查是否支持CSS声明 */ @supports (dis@R_ 512 _2266@: flex) { .module { display: flex; } } /* 检查多个条件 */ @supports (display: flex) and (-webkit-ap PE arance: checkbox) { .module { display: flex; } } 该规则的浏览器兼容性如下：
参考文章
The At-Rules of CSS MDN-At-rule本文内容大致结构、主要信息参考上面两文档。具体每个规则融入了自己的一些认识、开发经验等。有些内容属于 翻译 性质，非严格翻译，可能与原意有误差，欢迎指正！
感谢阅读！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-博闻强识：了解CSS中的@ AT规则 全部内容，希望文章能够帮你解决 html5教程-博闻强识：了解CSS中的@ AT规则 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-博闻强识：了解CSS中的@ AT规则的详细内容...