## 前言
很多小伙伴對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 。
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi