初識(shí)CSS3選擇器

注意：由于CSS3中的部分內(nèi)容尚未完全定稿，所以本文的部分可能會(huì)隨時(shí)更新。

現(xiàn)在談起CSS3的相關(guān)內(nèi)容，其實(shí)CSS3已經(jīng)不算是一個(gè)新東西了，畢竟出來有一段時(shí)間了。不過我卻沒有什么系統(tǒng)的經(jīng)驗(yàn)，上次被人問到是否了解CSS3新增的選擇器，各種尷尬，因?yàn)槲覊焊筒恢滥男┦荂SS3新增的選擇器，即使可能我之前有使用過。

為了補(bǔ)上這塊知識(shí)的缺陷，惡補(bǔ)了一下CSS選擇器的相關(guān)內(nèi)容，并實(shí)驗(yàn)了每種選擇器的效果。本文參考資源主要來自W3C文檔

首先我們來看一張圖，

圖中展示目前CSS Level1~Level3支持的所有的選擇器。這張圖是從W3C上抄下來的，絕對(duì)權(quán)威。

本篇文章將會(huì)說一說CSS Level3新增的選擇器（如上圖中飄黃的加重部分）。并附帶一些瀏覽器兼容性說明。

屬性選擇器

新增的屬性選擇器如下圖所示，

這幾個(gè)其實(shí)比較容易理解，使用起來應(yīng)該沒有什么障礙，這里就不多解釋了。

其瀏覽器兼容性如下圖，

結(jié)論：除了IE6，基本上可以放心的使用了。

結(jié)構(gòu)偽類選擇器

新增的結(jié)構(gòu)偽類選擇器如下圖所示，

說實(shí)話，新增的這幾個(gè)結(jié)構(gòu)偽類選擇器很容易弄混淆，特別是*-child(n)跟*-of-type(n)。

這里，我們就以nth-child(n)與nth-of-type(n)為例，通過一個(gè)demo來說明一下他們之間的區(qū)別。

通過demo，我們可以看出，

• nth-child(n)表示，選擇滿足以下條件的元素：第一是一個(gè)p元素；第二是父元素的第n個(gè)子元素
• nth-of-type(n)表示，選擇父元素的第n個(gè)子元素p

如果還沒弄明白，這里有一篇文章可供參考。

其瀏覽器兼容性如下圖，

UI元素狀態(tài)偽類選擇器

新增的UI元素狀態(tài)偽類選擇器如下圖所示，

其瀏覽器兼容性如下圖，

目標(biāo)偽類選擇器

新增的目標(biāo)偽類選擇器如下圖所示，

這個(gè)新增的選擇器有點(diǎn)不太好理解，它是啥意思呢？例如頁(yè)面上有個(gè)id=test的div，然后在URI中有#test的話，就會(huì)給id為test的div加上定義的樣式。

其瀏覽器兼容性如下，

否定偽類選擇器

新增的否定偽類選擇器如下圖所示，

個(gè)人覺得這個(gè)選擇器可能會(huì)使用的比較頻繁，它的作用是在匹配的一些列元素剔除選擇符為s的元素。相當(dāng)于做了個(gè)篩選。

其瀏覽器兼容性如下，

通用兄弟元素選擇器

新增的通用兄弟元素選擇器如下圖所示，

這個(gè)選擇器也應(yīng)該蠻有用的，稍微注意一下與E + F這種通用兄弟選擇器的區(qū)別就好了。

其瀏覽器兼容性如下，