關於CSS3中選擇符的執行個體詳解

來源:互聯網
上載者:User
英文原文: 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偽類目前還沒有瀏覽器支援。

【相關推薦】

1. CSS3免費視頻教程

2. 整合20個CSS/CSS3常用屬性

3. h5和css3製作帶提示文字的輸入框

4. 分享幾個常用的最新的css3屬性

5. 用CSS製作聊天框小尖角、氣泡效果

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.