一、At-rule
一種以@開頭的聲明語句，以分號;結尾。語法規則為: @IDENTIFIER (RULE); 。
At-rule主要用作表示CSS的行為，參考: https://www.cnblogs.com/wuyinghong/p/3700519.html
1、@charset—定義被樣式表使用的字符集
2、@import——告訴CSS引擎包含外部的CSS樣式表
3、@namespace——告訴CSS引擎所有的內容都必須考慮使用XML命名空間前綴
4、嵌套at-rules
（1）@media——條件組規則。如果設備符合標准定義的條件查詢則使用該媒體
（2）@font-face——描述了一個將從外部下載的字體
（3）@keyframes——描述了中間步驟在CSS動畫的序列
（4）@page——描述了文件的布局變化，當要打印文檔時。
（5）@supports——條件組規則，如果瀏覽器滿足給出的規則，則把它應用到內容中
（6）@document——條件組規則，如果被用到文檔的CSS樣式表滿足了給定的標准，那么將被應用到所有的內容中。
二、CSS規則定義
p {color:red;text-align:center;}
由選擇器后面跟着一對{}花括號，花括號內部有一條或多條聲明語句；每條聲明語句使用"屬性: 值;"的形式，中間用冒號，結尾用分號。
注釋以 "/*" 開始, 以 "*/" 結束。
CSS規則的定義涉及到兩個方面: 屬性和選擇器，參考: http://phpstudy.php.cn/css3/
三、CSS的屬性
參考: https://www.runoob.com/cssref/css-reference.html
四、CSS的選擇器
CSS選擇器的權值: important(最高，在設置屬性值后面添加"!important")、內聯(1000)、ID(100)、Class(10)、Tag(1)。
CSS選擇器的優先級: 根據選擇器的權值計算，組合選擇器的權值會進行疊加。
同一個元素應用可能多個選擇器時，權值大的優先；如果權值相同，那么則選擇最后加載的選擇器。
如果選擇器設置為class="A B C"，最終選擇的選擇器不是按A/B/C的先后順序，而方式按照A/B/C的CSS加載順序。
1、基本選擇器
(1) 標簽選擇器(元素選擇器)
直接寫元素標簽名字，比如p。其中比較特殊的是*，它表示選擇所有元素。
(2) 類選擇器
.class，其中class就是元素的class屬性需要填寫的值。
(3) ID選擇器
#id，其中id就是元素的id屬性值。(HTML頁面中能夠重復使用相同的ID)
(4) 屬性選擇器
元素[屬性=值][...]的基本格式，如果沒有"=值"的部分就表示元素需要包括該屬性。
可以多個屬性同時使用；其中=又擴展為~=、|=、^=、$=、*=。
2、派生選擇器
(1) 后代選擇器
用空格隔開的多個選擇器名字，比如div p表示div包含的所有p元素，不管是div直接包含還是間接包含。
(2) 子元素選擇器
用>號表示，比如div>p表示div下的所有子元素p，只能直接包含。
(3) (普通)兄弟選擇器
用~號表示，比如div~p表示div之后的所有同級兄弟p元素，但是div之前的兄弟元素p不包含在內。
(4) 相鄰兄弟選擇器
用+號表示，比如div+p表示div后面相鄰的p元素。(div和p在同一個層次上，並且p剛好在div后面)
(5) 並集選擇器
用,號表示，比如div,p表示所有的div元素和p元素。
(6) 交集選擇器
用.號表示，比如h3.special只能用於<h3 class="special">這樣的標簽中。
注意它和h3 .special不一樣，中間有空格和沒空格是有區別的。
(7) 偽類選擇器
用:號表示，一個選擇器可以同時使用多個偽類。
偽類是為了彌補選擇器的不足。
(8) 偽元素選擇器
用::表示，一個選擇器只能使用一個偽元素。
偽元素的本質則是創建一個虛擬元素然后在應用樣式。