jquery和css3中的選擇器nth-child如何使用

這篇文章主要介紹“jquery和css3中的選擇器nth-child如何使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“jquery和css3中的選擇器nth-child如何使用”文章能幫助大家解決問題。

nth-child()，是CSS3中的一個偽類選擇符，JQuery選擇器繼承了CSS的部分語法，允許通過標簽名、屬性名、內容對DOM元素進行快速、準確的選擇。

<div id="content">
 <p>標題1</p>   
 <p>內容1</p>   
 <p>標題2</p>   
 <p>內容2</p>
 <p>標題3</p>   
 <p>內容3</p>
 <p>標題4</p>   
 <p>內容4</p>
</div>

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

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

n 可以是一個數字，一個關鍵字，或者一個公式。

nth-child()的幾種用法

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

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

三：nth-child(an+b) 與 :nth-child(an-b) 先對元素進行分組，每組有a個，b為組內成員的序號，其中字母n和加號+不可缺省，位置不可調換，這是該寫法的標志，其中a,b均為正整數或0。如3n+1、5n+1。但加號可以變為負號，此時匹配組內的第a-b個。

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

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

css3實現隔行變色

加入css，四處標題全部變為紅色，代碼如下：

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

jQuery :nth-child() 選擇器

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

語法

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

 jQuery實現隔行變色

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

jQuery替換p標簽為h3標簽，內容不變

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

關于“jquery和css3中的選擇器nth-child如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。