CSS3中偽類選擇器是什么

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

 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>
<h3>偽類選擇器的用法</h3>
<p>CSS3 偽類選擇器only-of-type的用法</p>
<p>CSS3 偽類選擇器only-of-type的用法</p>
</section>

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

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

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

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

p:empty {display: none;}

以上是CSS3中偽類選擇器是什么的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！