CSS3中有哪些偽類選擇器， 偽類選擇器nth-child() 怎麼使用

CSS3中新的屬性為我們帶來了不少的便利，例如偽類選擇器nth-child()，但是它在IE6-8和FF3.0-瀏覽器不支援,CSS3中nth-of -type(n)（如nth-of-type(1)）這個特殊的類別選擇子可以設定更個性的標題和段落等，不過，目前nth-of-type(n)只支援火狐3、opera、 safari和chrome等部分瀏覽器。

:nth-child()選擇某個元素的一個或多個特定的子元素；你可以用這種方式選擇： 

:nth- child(length);/*參數是具體數字length為整數*/

:nth-child(n);/*參數是n,n從0開始計算*/

: nth-child(n*length)/*n的倍數選擇，n從0開始算*/

#:nth-child(n length);/*選擇大於length後面的元素*/

:nth-child(-n length)/*選擇小於length前面的元素*/

:nth-child(n*length 1);/*表示隔幾選一*/

範例：

li:nth-child(3){background:orange;}/*把第3個li的背景設為橘色*/

li:nth- child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍數的li的背景設為橘色*/

li:nth-child(n 3){background:orange;}/*選擇從第3個元素後面的li背景設為橘色*/

li:nth-child(-n 3){background:orange;}/*選擇從第3個元素前面的li把背景設為橘色*/

li:nth-child(3n 1){background:orange;}/*這個方法是實現隔幾選一的效果* /

:fist-child選擇某個元素的第一個子元素

範例：

li:first-child {background: green ;}/*把第1個li的背景設為綠色*/

:last-child選擇某個元素的最後一個子元素

範例：

li:last-child {background: green;}/*把最後一個li的背景設為綠色*/

:nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算

:nth-last-child()選擇器和前面的:nth-child()很相似，只是這裡多了一個last，所以他起的作用就和前面的":nth-child"不一樣了，他只要是從最後一個元素開始算，來選擇特定元素。

範例：

li:nth-last-child(4) {background: red;}/*把倒數第4個li的背景設為紅色*/

:nth-of-type()選擇指定的元素

:nth-of-type類似於:nth-child，不同的是他只計算選擇器中指定的那個元素,其實我們前面的實例都是指定了具體的元素，這個選擇器主要對用來定位元素中包含了好多不同類型的元素是很有用處。比如說，我們div.demo下有好多p元素，li元素，img元素等，但我只需要選擇p元素，並讓他每隔一個p元素就有不同的樣式，那我們就可以簡單的寫成：

p:nth-of-type(even) {background-color: lime;}

除了可以將n設為odd（偶數）或even（奇數）外，還可以將n設定為表達式，例如，nth-of-type(3n 2)

:nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算

這個選擇器不用說大家都能想得到了，他和前面的:nth-last-child一樣使用，只是他指一了元素的類型而以。

同樣在IE6-8和FF3.0-瀏覽器不支援這種選擇器

:first-of-type選擇一個上級元素下的第一個同類子元素;

:last-of-type選擇一個上級元素的最後一個同類子元素;

:nth-of-type,:nth- last-of-type;:first-of-type和:last-of-type實際意義並不是很大，我們前面講的:nth-child之類選擇器就能達到這此功能，不過大家要是感興趣還是可以了解一下，個人認為實用價值並不是很大。此類說法僅供參考。

:only-child表示的是一個元素是它的父元素的唯一一個子元素

<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
</ul>

如果我需要在ul只有一個p元素的時候，改變這個li的樣式，那麼我們現在就可以使用:only-child,如：

ul li {padding-left:10px;}

ul li:only-child {padding- left:15px}

:only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素

是表示一個元素他有很多子元素，而其中只有一個子元素是唯一的，那麼我們使用這個選擇方法就可以選擇中這個唯一的子元素，比如說

<section>
<h2>伪类选择器的用法</h2>
<p>CSS3 伪类选择器only-of-type的用法</p>
<p>CSS3 伪类选择器only-of-type的用法</p>
</section>

如果我們想只選擇中上面中的h2元素，我們就可以這樣寫，

h2:only-of-type{color:red;}

:empty選擇的元素裡面沒有任何內容

:empty是用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格，比如說，你有三個段落，其中一個段落什麼都沒有，完全是空的，你想這個p不顯示，那你就可這樣來寫：

p:empty {display: none;}

以上是CSS3中有哪些偽類選擇器， 偽類選擇器nth-child() 怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！