大家可能在CSS中見到過字符@然后加一些關鍵字的用法，這種用法就稱之為AT規(guī)則，在CSS中，種類還是很多的，這里總結列舉下。
常規(guī)規(guī)則
所謂“常規(guī)規(guī)則”指的是語法類似下面的規(guī)則：
@[KEYWORD] (RULE)
包括：

• @charset

定義字符集。字符設置據說會被HTTP頭覆蓋。某些軟件，例如Dreamweaver新建CSS文件時候，自動會帶有下面所示代碼，但實際開發(fā)時候，作用不大，因為meta中已經有所設置(<meta charset="utf-8">)，會覆蓋，所以我都是直接刪掉的。
@charset "utf-8";

• @import
  導入其他CSS樣式文件。實際上線時候，不建議使用，多請求，阻塞加載之類。但，本地開發(fā)可以使用，用做CSS模塊化開發(fā)，然后使用一些(如grunt)工具進行壓縮并合并。但是呢，相比less, sass等還是有不足，就是@import語句只能在CSS文件頂部，使得文件的前后關系控制，就不那么靈活。
  @import 'global.css';

• @namespace
  此規(guī)則應用到XML HTML(XHTML)上特別有用，因為這樣的話XHTML元素可以作為選擇器在CSS中使用。

/* XHTML命名空間 */
@namespace url(http://www.w3.org/1999/xhtml);
/* 內嵌在XHTML的SVG的命名空間 */
@namespace svg url(http://www.w3.org/2000/svg);

嵌套規(guī)則
所謂“嵌套規(guī)則”，就是帶有花括號{}, 語法類似下面的規(guī)則：
@[KEYWORD] { /* 嵌套語句 */}

包括：

• @document
  CSS 4.0規(guī)范有相關說明。如果文檔滿足給定的一些條件，就可以應用我們指定的一些樣式。比如說，這個CSS文件被子站A調用，和被子站C調用，我們可以通過域名匹配來執(zhí)行不同的CSS樣式。這樣，我們可以有效避免沖突，或者防止外鏈之類。

@document 
  /* 頁面URL需要是 */
  url(http://www.zhangxinxu.com/),  
  /* 頁面URL的開頭必須是... */
  url-prefix(www.zhangxinxu.com/wordpress/),  
  /* 該域上的所有頁面 */
  domain(zhangxinxu.com),  /* 所有https協(xié)議頁面 */
  regexp("https:.*")
{  
  /* 開始樣式 */
  body { font-family: Comic Sans; }

}

由于這個AT規(guī)則是CSS4水平的，所以目前的瀏覽器支持情況很弱，只有FireFox瀏覽器支持，而且還需要加前綴。但是，10年之后，也就是2025年再來看，估計就是另外一番景象了。

• @font-face
  這個大家可能比較熟，自定義字體用的。IE6也支持。目前相關文章也挺多，就不啰嗦，放個示意：

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

• @keyframes
  喜歡CSS3的同學這個也耳熟能詳了，輸入法打出來發(fā)現居然是“詳”而不是“翔”，原來不是“聽得太多耳朵都能拉出屎來”的意思哦，學習了！

用來聲明CSS3 animation動畫關鍵幀用的，一笑而過：

@keyframes fadeIn {
  0% {
    opacity: 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
  這個規(guī)則用在打印文檔時候修改一些CSS屬性。使用@page我們只能改變部分CSS屬性，例如間距屬性margin, 打印相關的orphans, widows, 以及page-break-*, 其他CSS屬性會被忽略。

@page :first {
  margin: 1in;
}

上面CSS表示:first頁面也要有:left, :right頁面margin間距。

@page的偽類包括：:blank, :first, :left, :right。

• @supports
  是否支持某CSS屬性聲明的AT規(guī)則，瀏覽器對齊支持性越來越好了，鄙人已經在實際項目中使用了這個規(guī)則，干嘛用呢？說來慚愧，當作hack使用了。具體細節(jié)不表。下面是一些使用示意：

/* 檢查是否支持CSS聲明 */ @supports (display: flex) {
  .module { display: flex; }
}/* 檢查多個條件 */ @supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }

}