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

重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱：kaimo313@foxmail.com。

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

由一個(gè) @ 關(guān)鍵字和后續(xù)的一個(gè)區(qū)塊組成，如果沒有區(qū)塊，則以分號(hào)結(jié)束。

指普通的 CSS 規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。

@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原話：不用謝，我已經(jīng)幫你找好了，如果頁面定位不準(zhǔn)，你可以打開頁面搜索關(guān)鍵字）大笑。

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

@charset "utf-8";

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

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

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

media 是 media query 使用的規(guī)則，能夠?qū)υO(shè)備的類型進(jìn)行一些判斷

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

page 用于分頁媒體訪問網(wǎng)頁時(shí)的表現(xiàn)設(shè)置（這個(gè)我還沒有用過_(:3」∠)_）

@page {
  margin: 10%;

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

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

counter-style 產(chǎn)生一種數(shù)據(jù)，用于定義列表項(xiàng)的表現(xiàn)。

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

keyframes 產(chǎn)生一種數(shù)據(jù)，用于定義動(dòng)畫關(guān)鍵幀。

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

fontface 用于定義一種字體，icon font 技術(shù)就是利用這個(gè)特性來實(shí)現(xiàn)的。

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

support 檢查環(huán)境的特性，它與 media 比較類似。

用于跟 XML 命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的 CSS 選擇器全都帶上特定命名空間。

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

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

上面部分很多規(guī)則，winter已經(jīng)很精煉的解釋了，下面看看普通規(guī)則

1、任何選擇器，都是由幾個(gè)符號(hào)結(jié)構(gòu)連接的：空格、大于號(hào)、加號(hào)、波浪線、雙豎線，這里需要注意一下，空格，即為后代選擇器的優(yōu)先級(jí)較低。

2、如果選擇器不是偽元素，由幾個(gè)可選的部分組成，標(biāo)簽類型選擇器，id、class、屬性和偽類，它們中只要出現(xiàn)一個(gè)，就構(gòu)成了選擇器。

3、如果選擇器是偽元素，則在這個(gè)結(jié)構(gòu)之后追加偽元素。只有偽類可以出現(xiàn)在偽元素之后。

winter整理了一個(gè)列表（不太嚴(yán)謹(jǐn)?shù)兀┻x擇器的語法結(jié)構(gòu)：

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

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

是由中劃線、下劃線、字母等組成的標(biāo)識(shí)符，CSS 還支持使用反斜杠轉(zhuǎn)義。

注意：屬性不允許使用連續(xù)的兩個(gè)中劃線開頭，否則會(huì)被認(rèn)為是 CSS 變量。

以雙中劃線開頭的屬性被當(dāng)作變量，與之配合的則是 var 函數(shù)：（具體可以參考CSS Variables 標(biāo)準(zhǔn)）

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

1、CSS 屬性值類型（在標(biāo)準(zhǔn) CSS Values and Unit）

CSS 范圍的關(guān)鍵字：initial，unset，inherit，任何屬性都可以的關(guān)鍵字

字符串：比如 content 屬性

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

整數(shù) / 實(shí)數(shù)：比如 flex 屬性

維度：單位的整數(shù) / 實(shí)數(shù)，比如 width 屬性

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

顏色：比如 background-color 屬性

圖片：比如 background-image 屬性

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

函數(shù)：來自函數(shù)的值，比如 transform 屬性

2、CSS 計(jì)算型函數(shù)

calc()函數(shù)是基本的表達(dá)式計(jì)算，它支持加減乘除四則運(yùn)算

max()表示取兩數(shù)中較大的一個(gè)

min()表示取兩數(shù)之中較小的一個(gè)

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

toggle()函數(shù)在規(guī)則選中多于一個(gè)元素時(shí)生效，它會(huì)在幾個(gè)值之間來回切換

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

比如calc()的例子：

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

比如toggle()的例子：列表項(xiàng)的樣式圓點(diǎn)和方點(diǎn)間隔出現(xiàn)

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

這個(gè)部分給我的感覺是耳目一新的，有一些確實(shí)在開發(fā)業(yè)務(wù)過程沒有用過，有一些也沒有接觸過，繼續(xù)查漏補(bǔ)缺，好好學(xué)習(xí)！