国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

玩轉CSS選擇器（二） 之 瀏覽器支持，常見Bug，性能優化

y1chuan / 710人閱讀

摘要：本節內容會跟著上一節的內容繼續完善，首先會補充選擇器的瀏覽器支持情況主要是說，比如我們最常用的群組選擇器在時才被支持，并且還支持了很多我們沒有想到的選擇器，如子元素選擇器，屬性選擇器，了解后你會發現還是挺了不起的。

前言

上一篇系列文章整理了CSS選擇器的基礎使用方法，因為內容較多且細致，寫了很多DEMO，目前將它整理成適合移動端瀏覽器的CSS選擇器的參考手冊，方便學習CSS的人參考使用，馬上就要搞定了，之后會放出 (笑臉)。

本節內容會跟著上一節的內容繼續完善，首先會補充CSS選擇器的瀏覽器支持情況（主要是說IE），比如我們最常用的s1,s2,…,sN群組選擇器在IE7時才被支持，并且IE7還支持了很多我們沒有想到的選擇器，如子元素選擇器，屬性選擇器，了解后你會發現IE7還是挺了不起的。

之后還會補充平常使用選擇器遇到的一些問題以及解決方案，最后了解瀏覽器是如何讀取選擇器的，怎樣使用選擇器能達到高效率。

瀏覽器支持 了不起的IE7

當我們在開發網頁時，如果網頁需要兼容IE6，那么自然地會把IE6和IE7瀏覽器歸為一路貨色，對于不兼容的選擇器和屬性都將不再考慮使用，可是你是否知道IE7相比IE6增加了許多選擇器可以用，如群組選擇器，相鄰選擇器，兄弟選擇器，屬性選擇器。

以下選擇器是不支持IE6，僅支持 IE7 及以上的瀏覽器

基本選擇器
選擇器 描述 版本
s1,s2,...,sN 群組選擇器，同時匹配所有s1元素或s2元素 2.1
E > F 子元素選擇器，匹配所有E元素的子元素F 2.1
E + F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F 2.1
E ~ F 匹配任何E標簽之后的同級F標簽 3
屬性選擇器
選擇器 描述 版本
E[attr] 匹配att屬性的E元素 2.1
E[attr="val"] 匹配att屬性且屬性值等于val的E元素 2.1
E[attr~="val"] 匹配att屬性且屬性值中的詞列表有一個等于val的E元素 2.1
E[attr^="val"] 匹配att屬性且屬性值為以val開頭的字符串的E元素 3
E[attr$="val"] 匹配att屬性且屬性值為以val結尾的字符串的E元素 3
E[attr*="val"] 匹配att屬性且屬性值為包含val的字符串的E元素 3
E[att|="val"] 匹配att屬性且屬性值為以val開頭并用連接符"-"分隔的字符串的E元素 2.1

在IE7瀏覽器，單復選框的checked在屬性選擇器中是不被支持的，這部分內容會在下面的常見問題中詳細說明。

偽類選擇器
選擇器 描述 版本
E:hover 設置元素在其鼠標懸停時的樣式 2.1
E:first-child 匹配父元素的第一個子元素E 2.1

E:hover在IE6中只有a元素可用

偽元素選擇器
選擇器 描述 版本
E:first-letter 選擇文本塊的第一個字母 2.1
E:first-line 選擇元素的第一行 2.1
平庸的IE8瀏覽器

雖然來到IE8的時代，但是對于新選擇器的支持并不多，不過還好我們最常用的E:before和E:after配合content屬性都在IE8中得到了很好的支持。

以下選擇器不支持IE6，IE7，僅支持 IE8 及以上的瀏覽器

偽類選擇器
選擇器 描述 版本
E:focus 設置對象在成為輸入焦點時的樣式 2.1
偽元素選擇器
選擇器 描述 版本
E:before 在元素前面插入內容，配合"content"使用 2.1
E:after 在元素后面插入內容，配合"content"使用 2.1
狂拽炫酷*炸天的IE9

IE最好的時代就是迎接CSS3的到來，從IE9支持了一大坨新CSS3的偽類以及偽元素，我就勉強給IE使用上這個酷炫點的修飾語。

以下選擇器不支持IE6，IE7，IE8，僅支持 IE9 及以上的瀏覽器

偽類選擇器
選擇器 描述 版本
E:checked 匹配用戶界面上處于選中狀態的元素E 3
E:enabled 匹配用戶界面上處于可用狀態的元素E 3
E:disabled 匹配用戶界面上處于禁用狀態的元素E 3
E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素 3
E:last-child 匹配父元素的最后一個子元素E 3
E:nth-last-child(n) 匹配父元素的倒數第n個子元素E 3
E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E 3
E:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素E 3
E:first-of-type 匹配同類型中的第一個同級兄弟元素E 3
E:last-of-type 匹配同類型中的最后一個同級兄弟元素E 3
E:only-child 匹配父元素僅有的一個子元素E 3
E:only-of-type 匹配同類型中的唯一的一個同級兄弟元素E 3
E:empty 匹配沒有任何子元素（包括text節點）的元素E 3
E:not(s) 匹配不含有s選擇符的元素 3
E:target 匹配文檔中特定"id"點擊后的效果 3
偽元素選擇器
選擇器 描述 版本
E::first-letter 選擇文本塊的第一個字母 3
E::first-line 選擇元素的第一行 3
E::before 在元素前面插入內容，配合"content"使用 3
E::after 在元素后面插入內容，配合"content"使用 3
E::selection 設置對象被選擇時的樣式 3
讓IE6-8支持偽類和屬性選擇器

如何才能讓IE6~8支持CSS3偽類和屬性選擇器，也許你已經想到了，我們會用JavaScript工具來進行輔助，那么剛好|8e50989464f7517425e2c31ba2d6dd59424|就可以完成這件事情，而且使用起來很簡單，只要把selectivizr.js引入到頁面上就可以了，如下：

但是使用它還有一些注意事項：

必須要引用一個JavaScript庫，比如jQuery

只能解析標簽引入的樣式，如果是