css選擇器攻略

前言

不少小夥伴對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庫來決定

  

<!- -[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 。