|
: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ù)我所知，沒有一個(gè)瀏覽器支持這個(gè)選擇符甚至沒有瀏覽器支持nth類的選擇符。如果有的話請(qǐng)幫我指正（Firefox3和IE8目前是否支持？dudo）
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 詳解CSS3中的屬性選擇符 [2] 下一頁(yè) 詳解CSS3中的屬性選擇符 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 詳解CSS3中的屬性選擇符 [3]
