初識CSS3選擇器

注意：由于CSS3中的部分內容尚未完全定稿，所以本文的部分可能會隨時更新。

現在談起CSS3的相關內容，其實CSS3已經不算是一個新東西了，畢竟出來有一段時間了。不過我卻沒有什么系統的經驗，上次被人問到是否了解CSS3新增的選擇器，各種尷尬，因為我壓根就不知道哪些是CSS3新增的選擇器，即使可能我之前有使用過。

為了補上這塊知識的缺陷，惡補了一下CSS選擇器的相關內容，并實驗了每種選擇器的效果。本文參考資源主要來自W3C文檔

首先我們來看一張圖，

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

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

屬性選擇器

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

這幾個其實比較容易理解，使用起來應該沒有什么障礙，這里就不多解釋了。

其瀏覽器兼容性如下圖，

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

結構偽類選擇器

新增的結構偽類選擇器如下圖所示，

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

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

通過demo，我們可以看出，

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

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

其瀏覽器兼容性如下圖，

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

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

其瀏覽器兼容性如下圖，

目標偽類選擇器

新增的目標偽類選擇器如下圖所示，

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

其瀏覽器兼容性如下，

否定偽類選擇器

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

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

其瀏覽器兼容性如下，

通用兄弟元素選擇器

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

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

其瀏覽器兼容性如下，