這篇文章主要介紹CSS3中偽類選擇器是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、博野網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為博野等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素；你可以按這種方式進(jìn)行選擇：

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

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

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

:nth-child(n+length);/*選擇大于length后面的元素*/

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

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

例子：

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

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

li:nth-child(n+3){background:orange;}/*選擇從第3個(gè)元素后面的li背景設(shè)為橙色*/

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

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

:fist-child選擇某個(gè)元素的第一個(gè)子元素

例子：

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

:last-child選擇某個(gè)元素的最后一個(gè)子元素

例子：

li:last-child {background: green;}/*把最后一個(gè)li的背景設(shè)為綠色*/

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

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

例子：

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

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

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

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

除了可以將n設(shè)置為odd（偶數(shù)）或even（奇數(shù)）外，還可以將n設(shè)置為表達(dá)式，比如，nth-of-type(3n+2)

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

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

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

:first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素；

:last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素；

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

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

1
2


3

如果我需要在ul只有一個(gè)p元素的時(shí)候，改變這個(gè)li的樣式，那么我們現(xiàn)在就可以使用:only-child,如：

ul li {padding-left:10px;}

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

:only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素

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

偽類選擇器的用法
CSS3 偽類選擇器only-of-type的用法
CSS3 偽類選擇器only-of-type的用法

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

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

:empty選擇的元素里面沒有任何內(nèi)容

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

p:empty {display: none;}

以上是CSS3中偽類選擇器是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！