前端筆記（8）css選擇器（二）

#選擇器的組合

選擇器清單是一個由逗号分隔的複雜選擇器序列；複雜選擇器則是用“空格”、“~”、“+”、“>”、“||”連接配接的複合選擇器；複合選擇器則是連寫的簡單選擇器。

選擇器的連接配接方式可以了解為四則運算一樣有優先級。

• 第一優先級：無連接配接符号，表示“且”
• 第二優先級：“空格”、“~”、“+”、“>”、“||”

• 第三優先級 ：“,”表示“或”

  複雜選擇器規定了五種連接配接符号。

• “空格”：後代，表示選中所有符合條件的後代節點， 例如“ .a .b ”表示選中所有具有 class 為 a 的後代節點中 class 為 b 的節點。
• “>” ：子代，表示選中符合條件的子節點，例如“ .a>.b ”表示：選中所有“具有 class 為 a 的子節點中，class 為 b 的節點”。
• “~”: 後繼，表示選中所有符合條件的後繼節點，後繼節點即跟目前節點具有同一個父元素，并出現在它之後的節點，例如“ .a~.b ”表示選中所有具有 class 為 a 的後繼中，class 為 b 的節點。
• “+”：直接後繼，表示選中符合條件的直接後繼節點，直接後繼節點即 nextSlibling。例如 “.a+.b ”表示選中所有具有 class 為 a 的下一個 class 為 b 的節點。

• “||”：列選擇器，表示選中對應列中符合條件的單元格。

  實際使用中“空格”、“>” 使用的比較常見。

  #選擇器的優先級

• id選擇器的數目記為a；
• 僞類選擇器、class選擇器和屬性選擇器的數目記為b；
• 僞元素選擇器和标簽選擇器的數目結尾c；
• “*”不影響優先級。

specificity = base * base * a + base * b + c
           

其中base是一個足夠大的正整數。

行内屬性的優先級永遠大于css規則。浏覽器提供了“!important”關鍵字優先級高于行内屬性，不推薦使用。

不同屬性選擇器的優先級相同。例如下面一段代碼中三個屬性選擇器的優先級是相同。

<input type="text"/>
[type]{
}
[type="text"]{
}
[type^="t"]{
}
           

同一優先級的選擇器遵循後面的覆寫前面的原則。