摘要：指普通的規則，由選擇器和屬性指定構成的規則。用于跟命名空間配合的一個規則，表示內部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續的兩個中劃線開頭，否則會被認為是變量。

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kaimo313@foxmail.com。

CSS 的頂層樣式表由兩種規則組成的規則列表構成，一種被稱為 at-rule，也就是 at 規則，另一種是 qualified rule，也就是普通規則。

由一個 @ 關鍵字和后續的一個區塊組成，如果沒有區塊，則以分號結束。

指普通的 CSS 規則，由選擇器和屬性指定構成的規則。

@charset： https://www.w3.org/TR/css-syntax-3/

@import：https://www.w3.org/TR/css-cascade-4/

@media：https://www.w3.org/TR/css3-conditional/

@page：https://www.w3.org/TR/css-page-3/

@counter-style：https://www.w3.org/TR/css-counter-styles-3

@keyframes：https://www.w3.org/TR/css-animations-1/

@fontface：https://www.w3.org/TR/css-fonts-3/

@supports：https://www.w3.org/TR/css3-conditional/

@namespace：https://www.w3.org/TR/css-namespaces-3/

上面由winter整理（winter原話：不用謝，我已經幫你找好了，如果頁面定位不準，你可以打開頁面搜索關鍵字）大笑。

@charset 用于提示 CSS 文件使用的字符編碼方式，它如果被使用，必須出現在最前面。這個規則只在給出語法解析階段前使用，并不影響頁面上的展示效果。

@charset "utf-8";

@import "index.css";
@import url("index.css");

import 還支持 supports 和 media query 形式。（這一點不怎么理解）

@import [  |  ]
        [ supports( [  |  ] ) ]?
        ? ;

media 是 media query 使用的規則，能夠對設備的類型進行一些判斷

@media print {
    body { font-size: 10px }
}

page 用于分頁媒體訪問網頁時的表現設置（這個我還沒有用過_(:3」∠)_）

@page {
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }

  @top-right {
    content: "Page " counter(page);
  }
}

counter-style 產生一種數據，用于定義列表項的表現。

@counter-style triangle {
  system: cyclic;
  symbols: ?;
  suffix: " ";
}

keyframes 產生一種數據，用于定義動畫關鍵幀。

@keyframes diagonal-slide {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 100px;
    top: 100px;
  }
}

fontface 用于定義一種字體，icon font 技術就是利用這個特性來實現的。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}

support 檢查環境的特性，它與 media 比較類似。

用于跟 XML 命名空間配合的一個規則，表示內部的 CSS 選擇器全都帶上特定命名空間。

用于設置視口的一些特性，不過兼容性目前不是很好，多數時候被 html 的 meta 代替。

@color-profile、@document、@font-feature-values

上面部分很多規則，winter已經很精煉的解釋了，下面看看普通規則

1、任何選擇器，都是由幾個符號結構連接的：空格、大于號、加號、波浪線、雙豎線，這里需要注意一下，空格，即為后代選擇器的優先級較低。

2、如果選擇器不是偽元素，由幾個可選的部分組成，標簽類型選擇器，id、class、屬性和偽類，它們中只要出現一個，就構成了選擇器。

3、如果選擇器是偽元素，則在這個結構之后追加偽元素。只有偽類可以出現在偽元素之后。

winter整理了一個列表（不太嚴謹地）選擇器的語法結構：

可以參考語法分析示例圖：

聲明部分是一個由 屬性: 值 組成的序列。

是由中劃線、下劃線、字母等組成的標識符，CSS 還支持使用反斜杠轉義。

注意：屬性不允許使用連續的兩個中劃線開頭，否則會被認為是 CSS 變量。

以雙中劃線開頭的屬性被當作變量，與之配合的則是 var 函數：（具體可以參考CSS Variables 標準）

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

1、CSS 屬性值類型（在標準 CSS Values and Unit）

CSS 范圍的關鍵字：initial，unset，inherit，任何屬性都可以的關鍵字

字符串：比如 content 屬性

URL：使用 url() 函數的 URL 值

整數 / 實數：比如 flex 屬性

維度：單位的整數 / 實數，比如 width 屬性

百分比：大部分維度都支持

顏色：比如 background-color 屬性

圖片：比如 background-image 屬性

2D 位置：比如 background-position 屬性

函數：來自函數的值，比如 transform 屬性

2、CSS 計算型函數

calc()函數是基本的表達式計算，它支持加減乘除四則運算

max()表示取兩數中較大的一個

min()表示取兩數之中較小的一個

clamp()則是給一個值限定一個范圍，超出范圍外則使用范圍的最大或者最小值

toggle()函數在規則選中多于一個元素時生效，它會在幾個值之間來回切換

attr()函數允許 CSS 接受屬性值的控制

比如calc()的例子：

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

比如toggle()的例子：列表項的樣式圓點和方點間隔出現

ul {
  list-style-type: toggle(circle, square);
}

這個部分給我的感覺是耳目一新的，有一些確實在開發業務過程沒有用過，有一些也沒有接觸過，繼續查漏補缺，好好學習！