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

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

注：本文寫于2006年1月，當時IE7、IE8和Firefox3還未發行，文中所有說的瀏覽器支持均未包括這三個版本的瀏覽器。在IE8和Fir

:nth-of-type()

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

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

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

:nth-of-type偽類目前還沒有瀏覽器支持。

:nth-last-of-type偽類:nth-last-of-type偽類指向的元素在其后還有若干同類型的元素。和:nth－last-child偽類一樣，它是從最后一個子元素向回數的。下面的規則將會匹配到倒數第二個兄弟元素p中(注意：是兄弟、同級別的節點)：

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

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

:last-child偽類

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

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

:last-childe偽類可以在基于Mozilla的瀏覽器中使用。Opera不支持:last-childe偽類，在Safri中存在bug(上面的規則會匹配到所有的p元素)。令人稀奇是的它可以在OmniWeb(測試版本5.1.1)中正常使用，盡管這個瀏覽器是基于Safari的。這可能是因為Apple WebKit最新版本的回歸，因為OmniWeb使用的WebKit通常要比Safari版本稍微低一點。

:first-of-type偽類

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

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

:first-of-type偽類目前還沒有瀏覽器支持。

:last-of-type偽類

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

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

:last-of-type偽類目前還沒有瀏覽器支持。

:only-child偽類

:only-childe偽類指向的是那些父元素中再沒有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一樣的(后者不夠專業、簡明)。

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

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

:only-of-type偽類

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

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

:only-of-type偽類目前還沒有瀏覽器支持。

【相關推薦】

總結

以上是生活随笔為你收集整理的php选择符和举例子,关于CSS3中选择符的实例详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。