前言
很多小夥伴對css選擇器表示不屑，覺得很簡單沒必要學習，其實你究竟瞭解多少呢？當面試官問你的時候，你能分出哪些是css3新增的選擇器，他們相容如何？又該如何處理呢？
css3選擇器分類
css3選擇器在最新的版本中作為一個獨立的模組分離了出來，而css選擇器有哪些呢？又該如何分類，請看下圖。
選擇器攻略
基本選擇器
id，class，*萬用字元選擇器，複合選擇器（選擇器分組），無相容問題
層次選擇器
後代選擇器：e f；子選擇器 e>f ；相鄰兄弟選擇器 e+f，只能選擇之後的一個；通用兄弟選擇器，e~f 之後的所有，卡可以選擇多個；後面三個相容ie7+
目標偽類選擇器
e：target 針對連線到的部分，相容ie9+
動態偽類
：linked，：visited，：active，：hover，：focus 其中active和focus 相容8+支援
語言偽類
：lang（en）可以針對不同語言，相容ie8+
ui元素狀態偽類
：checked，：enabled，：disabled ，相容ie9+
結構偽類
數量最多的一類，：first-child（css2），：last-child（css3），nth-child（n）篩選第幾個，nth-last-child，nth-of-type（n），：root，：only-child，：empty ，等，相容ie9+
否定偽類
：not（） 針對性排除，相容ie9+
偽元素
偽元素在新的規範中為雙冒號，為了區別偽類，ie6-8只識別單冒號，寫法不同，無相容問題
屬性選擇器
針對屬性，以及屬性值篩選，篩選符號為| 篩選出等於val以及以val-開始，^以val開始的，* 包含val，$以val結束，ie7+ 支援
盲區
選擇器的查詢效率
下面選擇器的效率，從上到下依次降低。
id選擇器（#myid）
類選擇器（。myclassname）
標籤選擇器（div，h1，p）
相鄰選擇器（h1+p）
子選擇器（ul > li）
後代選擇器（li a）
萬用字元選擇器（*）
屬性選擇器（a［rel=“external”］）
偽類選擇器（a：hover，li：nth-child）
具體建議如下：
避免普遍規則
不要在ID選擇器前加標籤名或類名
不要在類名選擇器前加標籤名
儘可能使用具體的類別
避免使用後代選擇器
標籤分類規則中不應該包含一個子選擇器
子選擇器的問題
藉助相關繼承關係
使用範圍內的樣式表
瀏覽器讀取選擇器的順序
瀏覽器讀取選擇器的順序是從右邊到左邊，而不是從左邊到右邊。所以如果你以前習慣了先寫高查詢效率的查詢，再寫低效率的，可以最佳化下了。
個人經驗相容
彙總選擇器的相容性，慎重使用，比如針對ie8+ ，可以使用的有基本選擇器，層次選擇器，動態偽類選擇器，語言偽類選擇器，偽元素，屬性選擇器；針對ie6 建議只使用基本選擇器以及簡單的偽類、偽元素、後代選擇器；針對現代瀏覽器，所有選擇器可以放心使用。整體建議還是不要為了使用新的選擇器而使用，要找到對應的使用場景，多使用基本選擇器能避免低版本ie的適配問題。
使用適配的指令碼檔案，實現讓ie6-8ie6-8支援屬性選擇器，偽類選擇器和偽元素。具體的支援情況根據js庫來決定。
備註：格外注意css針對ie瀏覽器的條件註釋的寫法。
<！- -［if （gte IE 6）&（lte IE 8）］> <！［endif］- ->
注意事項
Selectivizr自動檢測最佳的JavaScript庫，如果你JavaScript庫都沒有呼叫，則IE下的偽類是不起作用的。
樣式屬性必須使用標籤，以