CSS選取器的簡單介紹

前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！

選取器權重

　　如果以4位元表示選擇符權重，那麼：

• 元素選取器的權重是1；

• id 選取器的權重為100；

• class類別選取器的權重為10；

• 內聯style（JS操作的也是行間樣式）的權重為1000；

• 當然如果某屬性值設定了！important ,它還是最重要的，直接通殺；

CSS選取器簡介：

• 通配選取器，*{...}，星號代表通配選取器，可以與任何元素匹配；

• 元素選取器，html{...}，body{...}，p{...}，文檔的元素是最基本的選取器，元素選取器；

• id 選取器，#value，給元素設定一個 id 屬性 ，值為value；

• class 類別選取器，.value{...}，給元素設定一個 class 屬性，值為value；

• 屬性選取器，屬性選取器根據元素的屬性及屬性值來選擇元素，有很多種：

1. 簡單屬性選取器：img[title]，擷取設定了alt屬性的img元素；#wrapper[outter]，擷取 id 為 wrapper 並且具有屬性 wrapper 的元素；

2. 具體屬性選取器：input[type="button"]，擷取屬性值 button 的 input 元素；#wrapper[outter="abc"]，擷取 id 為 wrapper 並且屬性 outter的值為 abc 的元素；

3. 部分屬性選取器：p[class ^="a"]，擷取 class 屬性值以 a 為開頭的 p 元素；p[class $="b"]，擷取 class 屬性值以 b 為結尾的 p 元素；

• 分組選取器，將要分組的選取器用逗號隔開；#wrapper , #content{...}，擷取 id 為 wrapper 的元素，和 id 為 content 的元素，兩個都擷取；

• 後代選取器，將要分組的選取器用空格隔開，#wrapper #content{...}，在 id 為 wrapper 的元素對象內部，擷取 id 為 content 的元素，可能是子項目，也可能是子孫元素；

• 子項目選取器，將要分組的選取器用大於符號隔開，#wrapper > #content{...}，在 id 為 wrapper 的元素對象內部，擷取 id 為 content 的子項目，只往下找一級；子項目選取器和後代選取器不太一樣，後代選取器包含子項目選取器，並且後代選取器還會繼續向下尋找；

• 兄弟元素選取器：

1. 相鄰兄弟選取器（IE6及以下不支援），將要分組的選取器用加號隔開，.wrapper + .content{...}，擷取 class 為 wrapper 的元素之後，緊接著的這一個 class 為 content 的元素，和通用兄弟選取器不同的是，相鄰兄弟選取器只獲當前元素之後取緊接著的這一個元素，後面就算還有相同的，也選擇不到了；

2. 通用兄弟選取器（IE7及以下不支援），將要分組的選取器用波浪號隔開，.wrapper ~ .content{...}，擷取 class 為 wrapper 的元素之後，所有的 class 為 content 的元素，和相鄰兄弟選取器是不一樣的；

• 偽類別選取器（IE8及以下不支援）：

1. :root 選擇文檔的根項目，即 html 元素；

2. input:focus，當前 input 框獲得焦點；

3. element:hover，滑鼠移至上方在當前元素上面；

4. p:nth-of-type(n)，選擇是其父元素的第 n 個 p 元素，這個是依照父元素內部的 p 元素的順序計算 n ，然後擷取的； n 是整數，並且從1開始，也可以是公式，也可以是關鍵字even（偶數）、odd（奇數）；

5. p:first-of-type，選擇是其父元素的第 1 個 p 元素，與 p:nth-of-type(1) 效果相同；

6. p:last-of-type，選擇是其父元素的最後一 個 p 元素，注意前面沒有 nth；

7. p:nth-last-of-type(n)，選擇是其父元素的第 n 個 p 元素，但是是從最後一個子項往前數，注意前面有 nth；

8. p:nth-child(n)，選擇是其父元素的第 n 個子項目，並且得是 p 元素，這個是依照父元素內部的子項目的順序計算 n ，然後再看第 n 個是否為 p 元素；這就出現一種情況，第 n 個子項目可能不是 p ，然後就擷取不到了，所以用 nth-of-type(n) 會好一點；

9. p:first-child，選擇是其父元素的第 1 個元素，並且是 p 元素，與 p:nth-child(1) 相同；

10. p:last-child，選擇是其父元素的最後一個元素，並且是 p 元素；

11. p:nth-last-child(n)，選擇是其父元素的第 n 個子項目，並且得是 p 元素，但是是從最後一個子項往前數，注意前面有 nth；

12. 還有很多其他的...

• 虛擬元素選取器：

1. :first-letter，指定一個元素第一個字母的樣式，所有前置標點符號應與第一個字母一同應用該樣式，並且只能與區塊層級元素關聯；

2. :first-line，設定元素中第一行文本的樣式，只能與區塊層級元素關聯；

3. :after，IE7及以下不支援，在元素內容的最開始插入產生內容；

4. :before，IE7及以下不支援，在元素內容的最後插入產生內容；

5. ::selection，匹配被使用者選擇的部分；只支援雙冒號寫法，只支援顏色和背景顏色兩個樣式；