## 前言 很多小伙伴對css選擇器表示不屑，覺得很簡單沒必要學習，其實你究竟了解多少呢？當面試官問你的時候，你能分出哪些是css3新增的選擇器，他們兼容如何？又該如何處理呢？ ## css3選擇器分類 * css3選擇器在最新的版本中作為一個獨立的模塊分離了出來，而css選擇器有哪些呢？又該如何分類，請看下圖。  ## 選擇器攻略 1. 基本選擇器 id,class,*通配符選擇器，復合選擇器（選擇器分組），無兼容問題 2. 層次選擇器 后代選擇器：e f;子選擇器 e>f ;相鄰兄弟選擇器 e+f,只能選擇之后的一個；通用兄弟選擇器，e~f 之后的所有，卡可以選擇多個；后面三個兼容ie7+ 3. 目標偽類選擇器 e:target 針對連接到的部分，兼容ie9+ 4. 動態偽類 ：linked,:visited,:active,:hover,:focus 其中active和focus 兼容8+支持 5. 語言偽類 :lang(en)可以針對不同語言，兼容ie8+ 6. ui元素狀態偽類 ：checked,:enabled,:disabled ,兼容ie9+ 7. 結構偽類 數量最多的一類，：first-child(css2),:last-child(css3),nth-child(n)篩選第幾個，nth-last-child,nth-of-type(n),:root,:only-child,:empty ,等，兼容ie9+ 8. 否定偽類 ：not() 針對性排除，兼容ie9+ 9. 偽元素 偽元素在新的規范中為雙冒號，為了區別偽類，ie6-8只識別單冒號，寫法不同，無兼容問題 10. 屬性選擇器 針對屬性，以及屬性值篩選，篩選符號為| 篩選出等于val以及以val-開始，^以val開始的，* 包含val,$以val結束，ie7+ 支持 ## 解決方案 * 匯總選擇器的兼容性，慎重使用，比如針對ie8+ ，可以使用的有基本選擇器，層次選擇器，動態偽類選擇器，語言偽類選擇器，偽元素，屬性選擇器；針對ie6 建議只使用基本選擇器以及簡單的偽類、偽元素、后代選擇器；針對現代瀏覽器，所有選擇器可以放心使用。整體建議還是不要為了使用新的選擇器而使用，要找到對應的使用場景，多使用基本選擇器能避免低版本ie的適配問題。 * 使用適配的腳本文件，實現讓ie6-8ie6-8支持屬性選擇器，偽類選擇器和偽元素。具體的支持情況根據js庫來決定  ``` html <!- -[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <![endif]- -> ``` * **注意事項** 1. Selectivizr自動檢測最佳的JavaScript庫，如果你JavaScript庫都沒有調用，則IE下的偽類是不起作用的。 2. 樣式屬性必須使用`<link>`標簽，以`<style>`標簽定義的CSS樣式是不會被解析的。 3. 由于安全原因，樣式文件需以域的形式調用，像是file:是不起作用的。 4. 此效果非動態的。一旦樣式被應用就被固定了，DOM改變時不會映射過去的。 5. 如果JavaScript不可以，你可以使用`<noscript>`標簽調用一個用以反饋提示的樣式文件。 6. Selectivizr要想在IE下起作用，需要時標準模式，請檢查您的頁面頭部是否有DTD 。