CSS3中偽類選擇器是什么

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

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、博野網(wǎng)站定制設(shè)計、自適應(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è)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為博野等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

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

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

: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個li的背景設(shè)為橙色*/

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

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

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

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

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

例子：

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

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

例子：

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

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

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

例子：

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

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

:nth-of-type類似于:nth-child，不同的是他只計算選擇器中指定的那個元素,其實我們前面的實例都是指定了具體的元素，這個選擇器主要對用來定位元素中包含了好多不同類型的元素是很有用處。比如說，我們div.demo下有好多p元素，li元素，img元素等，但我只需要選擇p元素，并讓他每隔一個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()選擇指定的元素，從元素的最后一個開始計算

這個選擇器不用說大家都能想得到了，他和前面的: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之類選擇器就能達(dá)到這此功能，不過大家要是感興趣還是可以了解一下，個人認(rèn)為實用價值并不是很大。此類說法僅供參考。

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

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

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

ul li {padding-left:10px;}

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

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

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

<section>
<h3>偽類選擇器的用法</h3>
<p>CSS3 偽類選擇器only-of-type的用法</p>
<p>CSS3 偽類選擇器only-of-type的用法</p>
</section>

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

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

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

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

p:empty {display: none;}

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

當(dāng)前題目：CSS3中偽類選擇器是什么
文章起源：http://muchs.cn/article42/ihcgec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站排名、品牌網(wǎng)站設(shè)計、小程序開發(fā)、品牌網(wǎng)站制作、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)