英文原文：
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

中文翻譯：
http://www.dudo.org/article.asp?id=197

注：本文寫于2006年1月，當(dāng)時(shí)ie7、ie8和firefox3還未發(fā)行，文中所有說(shuō)的瀏覽器支持均未包括這三個(gè)版本的瀏覽器。在ie8和firefox3中，文中的大部分選擇符已經(jīng)被支持[dudo注]

在2005年的9月和10月，我先后發(fā)表了幾篇關(guān)于css2.1中選擇符的介紹文章。大體看來(lái)那幾篇文章中介紹過(guò)的大部分選擇符都已經(jīng)可以在像mozilla/firefox，safari和opera等現(xiàn)代瀏覽器中使用了。我們現(xiàn)在要做的就是等待internet explorer盡快趕上來(lái)，那我們就可以盡情地使用css2.1中的選擇符了。好在internet explorer在其第7個(gè)版本中已經(jīng)在盡力追趕了，至少在某些擴(kuò)展方面。

如果我們?cè)傧蚯翱匆稽c(diǎn)，在css3中還有功能更加強(qiáng)大的選擇符等待我們?nèi)グl(fā)掘和使用。css3中的很多選擇符已經(jīng)在現(xiàn)代瀏覽器中得到很好的應(yīng)用（ie8.0中也已經(jīng)部分地支持了css3，dudo注），但是這些基本功能上的支持還遠(yuǎn)遠(yuǎn)不能滿足開發(fā)者使用的要求。但是在某些情況下使用他們可以帶來(lái)很好的超前體驗(yàn)，因此我認(rèn)為了解一下css 3新增選擇符是如何使用還是有益處的。

本文中對(duì)選擇符描述主要是參考了《2005年12月15日w3c制定的選擇符草稿》。草稿中講到的新的選擇符可能會(huì)在css的第3個(gè)版本中出現(xiàn)，但是也可能會(huì)出現(xiàn)在其他語(yǔ)言中。如果你是幾個(gè)月前甚至是幾年前讀過(guò)這篇草稿，那么現(xiàn)在你應(yīng)該再去看一下是不是已經(jīng)出現(xiàn)了最新版本了。

這里我不打算去解釋css選擇符工作的基本原理。如果你想重要復(fù)習(xí)一下的話，最好從《細(xì)說(shuō)css2.1中的選擇符》開始。
首先，快速瀏覽一下css3中新增的選擇符：

css3選擇符語(yǔ)法概覽：

如果對(duì)上面的描述還不是很清楚的，請(qǐng)不要擔(dān)心。本文下面的部分將會(huì)對(duì)他們進(jìn)行更加詳細(xì)的講解，并且提供例子來(lái)演示他們是怎么使用的。

|||

子串匹配的屬性選擇符

這一組的選擇符都新加的，他允許開發(fā)者對(duì)屬性中的子字符串來(lái)進(jìn)行匹配。

假設(shè)html文檔中包含下面的代碼結(jié)構(gòu)：

<div id="nav-primary"></div> 
<div id="content-primary"></div> 
<div id="content-secondary"></div> 
<div id="tertiary-content"></div> 
<div id="nav-secondary"></div>

通過(guò)使用子串匹配的屬性選擇符就可以找到文檔中這些結(jié)構(gòu)性的特定組合。

下面的規(guī)則將為id以“nav”開頭的div元素設(shè)定背景顏色：

div[id^="nav"] { background:#ff0; } 

上例中選擇符會(huì)匹配div#nav-primary和div#nav-secondary。

要找到id以primary結(jié)尾的div元素，可以使用下面的規(guī)則：

div[id$="primary"] { background:#ff0; }

這時(shí)選擇符將匹配div#nav-primary和div#content-primary。

下面的規(guī)則將會(huì)匹配到id中含有content子字符串的的div中：

div[id*="content"] { background:#ff0; }

受影響的元素有：div#content-primary、div#content-secondary和div#tertiary-content。

子串匹配的屬性選擇符已經(jīng)在最新版本的mozilla、firefox、flock、camino、safari、omniweb以及opera中可以使用，但是如果ie中還不支持的話，我們最好還是先不要使用他們（作者在寫這篇文章時(shí)ie還在開發(fā)中，如今ie7、ie8都支持這些選擇符，dudo注）。

目標(biāo)偽類

含有識(shí)別標(biāo)識(shí)的url（一個(gè)#后面緊跟錨點(diǎn)名稱或者元素的id）指向的是文檔中的特定元素。鏈向其他目標(biāo)元素的這些元素就可以使用:target偽類來(lái)修飾它。如果當(dāng)前的url中沒(méi)有任何的片斷識(shí)別標(biāo)識(shí)，:target偽類將不會(huì)匹配任何元素。

還是以上面提到的代碼結(jié)構(gòu)為例，如果url中包含content-primary標(biāo)識(shí)時(shí)，現(xiàn)在的規(guī)則將會(huì)在他外圍增加一個(gè)邊框：

div#content-primary:target { outline:1px solid #300; }

url是類似這樣的形式的：
http://www.example.com/index.html#content-primary。
基于mozilla和safari的瀏覽器已經(jīng)支持:target偽類。

ui元素狀態(tài)偽類

:enabled偽類和:disabled偽類
在瀏覽器允許改變表單控件外觀的前提下，:enabled偽類和:disable偽類允許開發(fā)者指定用戶界面中可用和不可用元素（表單元素）的顯示樣式。下面的規(guī)則將會(huì)根據(jù)單行輸入框是否可用設(shè)定不同的背景顏色：

input[type="text"]:enabled { background:#ffc; } 
input[type="text"]:disabled { background:#ddd; }

|||

:checked偽類
:checked偽類允許開發(fā)者為處于選中狀態(tài)的checkbox和radio設(shè)定樣式。當(dāng)然這也要在瀏覽器允許改變表單控件外觀的條件下。下面的css規(guī)則將會(huì)使選中的radio和checkbox元素顯示一個(gè)綠色邊框：

input:checked { border:1px solid #090; }

ui元素狀態(tài)偽類目前可以在opera和基于mozilla的瀏覽器中使用。

要注意的是，許多瀏覽器對(duì)于開發(fā)者對(duì)表單控件樣式的改變有著嚴(yán)格的限制。更多關(guān)于這方便的內(nèi)容可以我的兩篇文章：《樣式化表單控件》和《樣式化更多表單控件》。

結(jié)構(gòu)性偽類

結(jié)構(gòu)性偽類允許開發(fā)者根據(jù)文檔樹中表明的結(jié)構(gòu)來(lái)指定元素，而這些使用簡(jiǎn)單選擇符或者是混合選擇符都無(wú)法做到。結(jié)構(gòu)性偽類功能十分強(qiáng)大，但是不幸的是現(xiàn)代瀏覽器僅提供了有限的支持。

:root偽類
:root偽類指向的是文檔的根元素。在html中，文檔的根元素始終是html，也就是說(shuō)現(xiàn)在的兩條規(guī)則其實(shí)是一樣的（大體上說(shuō)來(lái):root要比html更專業(yè)點(diǎn)）。

:root { background:#ff0; } 
html { background:#ff0; } 

:nth-child()偽類

:nth-child()偽類指向的元素在文檔樹中有一定數(shù)量的兄弟元素存在。其中括號(hào)內(nèi)的參數(shù)，可以是一個(gè)數(shù)字，也可以一個(gè)關(guān)鍵字或者一個(gè)公式。
數(shù)字b指是的第b個(gè)子元素。下面的規(guī)則將會(huì)應(yīng)用到父元素下所有p元素中的第三個(gè)中：

p:nth-child(3) { color:#f00; }

關(guān)鍵字odd（奇數(shù)）和even（偶數(shù)）可以用來(lái)匹配序號(hào)為奇數(shù)或者是偶數(shù)的子元素。第一個(gè)元素的序號(hào)為1，因?yàn)橄旅娴囊?guī)則將會(huì)匹配第1、3、5...了子元素p：

p:nth-child(odd) { color:#f00; }

下面的規(guī)則則匹配第2、4、6...個(gè)字元素p：

p:nth-child(even) { color:#f00; }

表達(dá)式an+b可以用來(lái)創(chuàng)建更加復(fù)雜的循環(huán)模式。在表達(dá)式中，a代表步長(zhǎng)，n是一個(gè)從0開始的計(jì)數(shù)器，b代表偏移量。其中，所有的數(shù)值都必須是整數(shù)（這里，n是從0開始的，和js等中的循環(huán)不同的是，至于到多少結(jié)束取決于元素的個(gè)數(shù)決定，如文檔中有20個(gè)元素，3n(n=1,2...)就會(huì)分別選擇第3、6、9、...18個(gè)元素，n此時(shí)為6 ，dudo注）。為了更好理解如何使用表達(dá)式我們先看幾個(gè)代碼實(shí)例：

下面的規(guī)則將會(huì)匹配序號(hào)數(shù)為3的倍數(shù)的所有p元素。在第一行中，b等于0，因此可以忽略不寫（見第二行）：

p:nth-child(3n+0) { color:#f00; } 
p:nth-child(3n) { color:#f00; }

偏移量可以用來(lái)指定樣式的循環(huán)是從哪個(gè)元素開始應(yīng)用的。如果有一個(gè)20行的表格，我們希望從第10行以后的奇數(shù)行開始使用不同的背景顏色，就可以使用下面這條規(guī)則：

tr:nth-child(2n+11) { background:#ff0; }

由于n是從為開始的，因此第一個(gè)受影響的tr元素的序號(hào)是11（2*0+11＝11,dudo注）。接下來(lái)就是第13行（2*1+11=13）再接下來(lái)就第15行（2*2+11＝15），以此類推。

更詳細(xì)介紹請(qǐng)參照css 3選擇符中的《nth-child()偽類》。

那么，對(duì)于這樣有用的一個(gè)選擇符又有哪些瀏覽器支持它呢？很糟糕，據(jù)我所知，沒(méi)有一個(gè)瀏覽器支持這個(gè)選擇符甚至沒(méi)有瀏覽器支持nth類的選擇符。如果有的話請(qǐng)幫我指正（firefox3和ie8目前是否支持？dudo）

|||

:nth-of-type()

:nth-of-type()偽類和nth-child()偽類找使用方法十分相似，只不過(guò)他匹配的是規(guī)則中指明類型的元素。下面的規(guī)則將會(huì)匹配每個(gè)屬于父元素中第三個(gè)子元素的p元素（屬于第3個(gè)子元素的p在一個(gè)該當(dāng)中可能會(huì)有很多，只不過(guò)他們位于不同的父元素下，dudo注）：

p:nth-of-type(3) { background:#ff0; }

當(dāng)你想確定是否已經(jīng)指向了第三個(gè)p元素，這種方法會(huì)很有用。開始你可能覺(jué)得這和使用nth-child效果是一樣的，但是nth-child(3)會(huì)把所有的子元素都計(jì)算進(jìn)來(lái)，因此結(jié)果可能就會(huì)不一樣，除非p所有的所有兄弟元素也都是p元素。

:nth-of-type偽類目前還沒(méi)有瀏覽器支持。

:nth-last-of-type偽類
:nth-last-of-type偽類指向的元素在其后還有若干同類型的元素。和:nth－last-child偽類一樣，它是從最后一個(gè)子元素向回?cái)?shù)的。下面的規(guī)則將會(huì)匹配到倒數(shù)第二個(gè)兄弟元素p中（注意：是兄弟、同級(jí)別的節(jié)點(diǎn)）：

p:nth-last-of-type(2) { background:#ff0; }

:nth-last-of-type()目前還沒(méi)有瀏覽器支持。

:last-child偽類

:last偽類指向的是父元素中最后一個(gè)子元素。它和:nth-last-child(1)效果是一樣的。下面的規(guī)則匹配所有屬于父元素中最后一個(gè)子元素的p：

p:last-child { background:#ff0; }

:last-childe偽類可以在基于mozilla的瀏覽器中使用。opera不支持:last-childe偽類，在safri中存在bug（上面的規(guī)則會(huì)匹配到所有的p元素）。令人稀奇是的它可以在omniweb（測(cè)試版本5.1.1）中正常使用，盡管這個(gè)瀏覽器是基于safari的。這可能是因?yàn)閍pple webkit最新版本的回歸，因?yàn)閛mniweb使用的webkit通常要比safari版本稍微低一點(diǎn)。

:first-of-type偽類
:first-of-type偽類指向同類型元素中的第一個(gè)元素。它和:nth-of-type(1)是一樣的。

p:first-of-type { background:#ff0; }

:first-of-type偽類目前還沒(méi)有瀏覽器支持。

:last-of-type偽類
:last-of-type偽類指向同類型元素中的最后一個(gè)元素。它和nth-last－of-type(1)是一樣的。

p:last-of-type { background:#ff0; }

:last-of-type偽類目前還沒(méi)有瀏覽器支持。

:only-child偽類
:only-childe偽類指向的是那些父元素中再?zèng)]有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一樣的（后者不夠?qū)I(yè)、簡(jiǎn)明）。

p:only-child { backgound:#ff0; }

:only-childe偽類目前可以在基于mozilla的瀏覽器中使用。在safari似乎被解釋成了:first-child（上面的規(guī)則會(huì)被匹配到文檔中所有第一個(gè)子元素p中）。

:only-of-type偽類
:only-of-type偽類指向的是那些父元素中再也沒(méi)有與之類型相同的子元素。這和:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)相同（后者專業(yè)性不夠）。

p:only-of-type { background:#ff0; }

:only-of-type偽類目前還沒(méi)有瀏覽器支持。

|||

:empty偽類
:empty偽類指向沒(méi)有任何子元素的元素。其中包括text節(jié)點(diǎn)，因此下面的示例只有第一行是空元素。

<p></p> 
<p>text</p> 
<p><em></em></p>

下面的規(guī)則只匹配第一行的p元素：

p:empty { background:#ff0 }

:empty偽類目前被基于mozilla的瀏覽器支持。safari會(huì)錯(cuò)誤地把樣式應(yīng)用到所有指定的元素中去。

否定偽類
否定偽類寫成:not(s)，參數(shù)s為簡(jiǎn)單選擇符。它指向的是除簡(jiǎn)單選擇所指向的元素以外的所有元素。例如，下面的css將會(huì)指向所有不是p的元素：

:not(p) { border:1px solid #ccc; }

否定偽類目前只有基于mozilla的瀏覽器支持。

::selection偽類
::selection偽類匹配指定元素中處于選中或者高亮狀態(tài)的部分。其中一個(gè)應(yīng)用就是用它來(lái)控制選中文本的樣式。
下面的規(guī)則會(huì)使選中的文本顏色變?yōu)榧t色：

::select { color:#f00; }

::selection偽類目前可能基于safari的瀏覽器支持。但是在使用上會(huì)出現(xiàn)不可預(yù)料的情況，因此safari還需要一點(diǎn)改進(jìn)。基于mozilla的瀏覽器要使用-moz-prefix: ::-mozi-selection來(lái)實(shí)現(xiàn)。這種prefix可能最終會(huì)被去掉。

通用兄弟元素選擇器
通用兄弟元素選擇器通過(guò)兩個(gè)簡(jiǎn)單選擇符通過(guò)波浪號(hào)（~）分隔組成。它匹配第二個(gè)簡(jiǎn)單選擇符中所匹配的元素，而且與第一個(gè)簡(jiǎn)單選擇符中匹配的元素要出現(xiàn)在他的前面。這兩個(gè)元素必須具有同一個(gè)父元素，但是第二個(gè)元素不一定必須緊跟在第一個(gè)元素之后。這條css規(guī)則將會(huì)匹配所有p元素之后ul元素：

p ~ ul { background:#ff0; }

通用兄弟元素選擇器目前有opera和基于mozilla的瀏覽器支持。

亟需更好的瀏覽器支持
部分css 3選擇符已經(jīng)被廣泛支持。但是，大部分非常有用的選擇符在現(xiàn)代瀏覽器中或者未被支持或者使用受到限制。這就使得本文中介紹的很多選擇符在今天的web或多或少失去了用武之地。但是不必害怕去嘗試它，你仍然可以在支持他們的帶來(lái)超前體驗(yàn)的高級(jí)瀏覽器中使用他們。

[附件]css3選擇符在現(xiàn)在瀏覽器（firefox 2、firefox 3、internetexplorer 7、internet explorer 8、oper9.27）中的支持程度（dudo驗(yàn)證，請(qǐng)指正！）

_________________ie 7________ie8________ff2_________ff3______opera9.27
e[foo^="bar"]______y__________y__________y__________y__________y
e[foo$="bar"]    ______y__________y__________y__________y__________y
e[foo*="bar"]    ______y__________y__________y__________y__________y
e:root____________ n__________n__________y__________y__________y
e:nth-child()_______ n__________n__________n__________n__________n
e:nth-last-child()____ n__________n__________n__________n__________n
e:nth-of-type()_____ n__________n__________n__________n__________n
e:nth-last-of-type()__ n__________n__________n__________n__________n
e:last-child_________ n__________n__________y__________y__________n
e:first-of-type______ n__________n__________n__________n__________n
e:only-child________ n__________n__________y__________y__________y
e:only-of-type______n__________n__________n__________n__________n
e:empty__________ n__________n__________y__________y__________n
e:target___________n__________n__________y__________y__________n
e:enabled_________ n__________n__________y__________y__________y
e:disabled_________ n__________n__________y__________y__________y
e:checked_________n__________n__________n__________n__________y
::selection_________n__________n__________n__________n__________n
not()_____________n__________n__________y__________y__________y
e ~ f_____________y__________y__________y__________y__________y