林大媽的CSS知識清單（一）新增樣式
回顧CSS選擇符，學習接入樣式的更多方式。
一、選擇符
1. 種類
① 型別選擇符：直接的HTML標籤名，例如： body、p、div 等；
② 後代選擇符：空格，例如： div p 選擇div中的所有p元素後代；
③ ID選擇符：形如“#id”，例如 #introduction 選擇id為introduction的元素（注：理論上說id必須要唯一定義，但瀏覽器為了向下相容不好好寫HTML程式碼的人，會將所有使用此ID的元素都新增上該樣式）；
④ 類選擇符：形如“.class”，例如 .latest 選擇所有class為latest的元素；
⑤ 子選擇符：形如“>”，例如 div > p 選擇div中的第一個p元素直接後代；
⑥ 相鄰同輩選擇符：形如“+”，例如 h2 + p 選擇位於h2後面，且與h2有相同的父元素的第一個p元素；
⑦ 一般同輩選擇符：形如“~”，例如 h2 ~ p 選擇位於h2後面，且與h2有相同的父元素的所有p元素；
⑧ 通用選擇符：“*”，表示選擇全部元素（類比其他例如SQL語言的萬用字元）；
⑨ 屬性選擇符：形如“input[type="email"]”，例如 abbr[title] 選擇所有擁有title屬性的abbr元素（注：其中[]中填入的屬性值可以用類似RegExp的語法匹配，例如： a[href^="http:"] 表示選擇所有href開頭為http:的a元素）；
⑩ 偽元素：帶有雙冒號“::”的選擇器，例如 p::first-letter 選擇p元素中的第一個字元（謹慎地使用偽元素，因為如果用它們插入一些有實質性互動意義的內容時，如果CSS載入不正確就會產生很大的麻煩，而且螢幕閱讀器沒有統一方法解釋它們）；
⑩① 偽類：帶有單冒號“:”的選擇器，例如 div:hover 表示當滑鼠在div上移動時給div應用上這個樣式（同樣，由於鍵盤、移動端等不一定真的有懸停狀態，請也不要將有實質性互動意義的內容新增到:hover的元素中）。
二、層疊與繼承
1. “層疊”樣式表
之所以CSS（Cascading Style Sheet）要叫CSS，是因為它具有層疊的特點。這似乎是廢話，但CSS中層疊的特性保證了它在程式碼多次複用時正常地執行。所謂的層疊，實際上就是根據程式碼的前後順序、優先順序等因素來最終確定哪些樣式被覆蓋掉，哪些被應用上。
2. 繼承
有些屬性，會被應用它們的元素後代繼承，例如文字顏色、字型大小等。繼承使CSS程式碼被複用，而層疊保證了複用狀態下樣式能按照期望正常顯示。
3. 優先順序
簡單地說，優先順序分成幾個等級，相同優先順序的選擇器相連會使優先順序更高，但在CSS內部的實現中，低優先順序的選擇器無論有多少個連在一起，最終的組成的選擇器優先順序也不會比一個高優先順序的選擇器高。
① 最高優先順序：內聯樣式；
② 排名第二：ID選擇器；
③ 排名第三：class選擇器、偽類選擇器以及屬性選擇器（三者相等）；
④ 排名第四：型別選擇器、偽元素選擇器（二者相等）；
⑤ 排名第五：繼承父元素而得到的樣式。
三、應用樣式，提升效能
1. 應用樣式的方法：① 在 <style></style> 中定義；② 使用 <link href="xxx.css" /> 標籤從外部引入；③ @import 'xxx.css' 從外部引入。
2. 提升效能
要想減少頁面的“上屏速度”，一是從網路上優化，二是從減小檔案大小上做文章，三是從頁面自身載入順序上想辦法。因此：
① 減少HTTP請求
我們知道，每一個檔案的請求都會單獨傳送HTTP請求，然後瀏覽器花一定的時間進行下載，並渲染頁面。因此，我們要儘量少地使用 @import ，並將CSS檔案數量儘可能減少至一兩個；
② 壓縮檔案
寫過CSS的都知道，CSS的很多屬性和值都是重複的，因此它壓縮的比率很高，一個CSS檔案壓縮後會減少70%~80%的大小。這顯然可以減少頻寬的佔用，很多Web伺服器會在瀏覽器的支援下啟用自動壓縮線上資源。同時，要讓伺服器幫你設定較長的CSS檔案快取時間。壓縮檔案和合理快取內容是提升網站效能最重要的兩件事；
③ 老生常談，不讓JavaScript指令碼載入阻塞頁面渲染
初學時常常看到網路上大家的程式碼中， <script> 標籤都會放在HTML中body元素的末尾，很多人只是說這樣可以提升頁面載入速度卻沒有講清楚為什麼。JavaScript的下載與執行過程是比較緩慢的，而瀏覽器在解釋HTML的過程中，加入將指令碼放在了位於首部的 <head> 標籤中，就會先忽視下面body部分的渲染，在白屏狀態下先下載執行JavaScript，如此使用者的體驗極差。因此古典的做法是將 <script> 標籤往後擺。HTML5中 <script> 標籤加上了兩個屬性：async和defer，它們的作用分別是1. 使指令碼非同步載入，完畢時阻塞HTML解析並執行指令碼2.使指令碼非同步載入，等HTML載入完畢後執行指令碼。但這兩個屬性是HTML5的屬性，意味著IE10以及更早不會支援。
總結：我們認識了常用的CSS選擇符和一些新穎的便於操作的選擇符，另外梳理了不同選擇符之間的優先順序關係，最後探討了該如何提升網站頁面載入的速度。
&n