|
:nth-of-type()
:nth-of-type()偽類和nth-child()偽類找使用方法十分相似，只不過他匹配的是規(guī)則中指明類型的元素。下面的規(guī)則將會(huì)匹配每個(gè)屬于父元素中第三個(gè)子元素的p元素（屬于第3個(gè)子元素的p在一個(gè)該當(dāng)中可能會(huì)有很多，只不過他們位于不同的父元素下，dudo注）：
p:nth-of-type(3) { background:#ff0; }
當(dāng)你想確定是否已經(jīng)指向了第三個(gè)p元素，這種方法會(huì)很有用。開始你可能覺得這和使用nth-child效果是一樣的，但是nth-child(3)會(huì)把所有的子元素都計(jì)算進(jìn)來，因此結(jié)果可能就會(huì)不一樣，除非p所有的所有兄弟元素也都是p元素。
:nth-of-type偽類目前還沒有瀏覽器支持。
:nth-last-of-type偽類
:nth-last-of-type偽類指向的元素在其后還有若干同類型的元素。和:nth－last-child偽類一樣，它是從最后一個(gè)子元素向回?cái)?shù)的。下面的規(guī)則將會(huì)匹配到倒數(shù)第二個(gè)兄弟元素p中（注意：是兄弟、同級別的節(jié)點(diǎn)）：
p:nth-last-of-type(2) { background:#ff0; }
:nth-last-of-type()目前還沒有瀏覽器支持。
: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（測試版本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偽類目前還沒有瀏覽器支持。
:last-of-type偽類
:last-of-type偽類指向同類型元素中的最后一個(gè)元素。它和nth-last－of-type(1)是一樣的。
p:last-of-type { background:#ff0; }
:last-of-type偽類目前還沒有瀏覽器支持。
:only-child偽類
:only-childe偽類指向的是那些父元素中再?zèng)]有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一樣的（后者不夠?qū)I(yè)、簡明）。
p:only-child { backgound:#ff0; }
:only-childe偽類目前可以在基于Mozilla的瀏覽器中使用。在Safari似乎被解釋成了:first-child（上面的規(guī)則會(huì)被匹配到文檔中所有第一個(gè)子元素p中）。
:only-of-type偽類
:only-of-type偽類指向的是那些父元素中再也沒有與之類型相同的子元素。這和: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偽類目前還沒有瀏覽器支持。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 詳解CSS3中的屬性選擇符 [3] 下一頁 詳解CSS3中的屬性選擇符 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 詳解CSS3中的屬性選擇符 [4]
