nth-child()，是CSS3中的一個(gè)偽類選擇符，JQuery選擇器繼承了CSS的部分語(yǔ)法，允許通過(guò)標(biāo)簽名、屬性名、內(nèi)容對(duì)DOM元素進(jìn)行快速、準(zhǔn)確的選擇。

本文通過(guò)對(duì)如下html中的div內(nèi)容作處理改變，來(lái)講解jquery和css3中的選擇器nth-child使用方法和用途。

<div id="content">
 <p>標(biāo)題1</p>   
 <p>內(nèi)容1</p>   
 <p>標(biāo)題2</p>   
 <p>內(nèi)容2</p>
 <p>標(biāo)題3</p>   
 <p>內(nèi)容3</p>
 <p>標(biāo)題4</p>   
 <p>內(nèi)容4</p>
</div>

CSS3偽類選擇器：nth-child()

:nth-child(n) 選擇器匹配父元素中的第 n 個(gè)子元素，元素類型沒(méi)有限制。

n 可以是一個(gè)數(shù)字，一個(gè)關(guān)鍵字，或者一個(gè)公式。

nth-child()的幾種用法

一：nth-child(number) 直接匹配第number個(gè)元素。參數(shù)number必須為大于0的整數(shù)。

二：nth-child(an)匹配所有倍數(shù)為a的元素。其中參數(shù)an中的字母n不可缺省，它是倍數(shù)寫法的標(biāo)志，如3n、5n

三：nth-child(an+b) 與 :nth-child(an-b) 先對(duì)元素進(jìn)行分組，每組有a個(gè)，b為組內(nèi)成員的序號(hào)，其中字母n和加號(hào)+不可缺省，位置不可調(diào)換，這是該寫法的標(biāo)志，其中a,b均為正整數(shù)或0。如3n+1、5n+1。但加號(hào)可以變?yōu)樨?fù)號(hào)，此時(shí)匹配組內(nèi)的第a-b個(gè)。

四：nth-child(-an+b) 此處一負(fù)一正，均不可缺省，否則無(wú)意義。這時(shí)與:nth-child(an+1)相似，都是匹配第1個(gè)，但不同的是它是倒著算的，從第b個(gè)開(kāi)始往回算，所以它所匹配的最多也不會(huì)超過(guò)b個(gè)。

五：nth-child(odd) 與 :nth-child(even) 分別匹配序號(hào)為奇數(shù)與偶數(shù)的元素。奇數(shù)(odd)與(2n+1)結(jié)果一樣；偶數(shù)(even)與(2n+0)及(2n)結(jié)果一樣。

css3實(shí)現(xiàn)隔行變色

加入css，四處標(biāo)題全部變?yōu)榧t色，代碼如下：

#content p:nth-child(2n+1) {
    background-color: red;
}

jQuery :nth-child() 選擇器

:nth-child(n) 選擇器選取屬于其父元素的不限類型的第 n 個(gè)子元素的所有元素。

語(yǔ)法

:nth-child(n|even|odd|formula)

 jQuery實(shí)現(xiàn)隔行變色

<script type="text/javascript"> 
$(function(){ 
    $("#content p:nth-child(odd)").css("color","red"); 
}); 
</script>

jQuery替換p標(biāo)簽為h2標(biāo)簽，內(nèi)容不變

<script type="text/javascript"> 
$(function(){
    $("#content p:nth-child(odd)").each(function(){
        $(this).replaceWith('<h2>'+$(this).html()+'</h2>');
    });
}); 
</script>

到此這篇關(guān)于jquery和css3中的選擇器nth-child使用方法和用途示例的文章就介紹到這了,更多相關(guān)jquery和css3中的nth-child內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論