欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery和css3中的選擇器nth-child使用方法和用途示例

 更新時間:2023年03月25日 17:24:37   投稿:yin  
nth-child(),是CSS3中的一個偽類選擇符,JQuery選擇器繼承了CSS的部分語法,允許通過標簽名、屬性名、內容對DOM元素進行快速、準確的選擇。

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

本文通過對如下html中的div內容作處理改變,來講解jquery和css3中的選擇器nth-child使用方法和用途。

<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 可以是一個數(shù)字,一個關鍵字,或者一個公式。

nth-child()的幾種用法

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

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

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

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

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

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

加入css,四處標題全部變?yōu)榧t色,代碼如下:

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

jQuery :nth-child() 選擇器

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

語法

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

參數(shù)描述
n要匹配的每個子元素的索引。

必須是一個數(shù)字。第一個元素的索引號是 1。
even選取每個偶數(shù)子元素。
odd選取每個奇數(shù)子元素。
formula規(guī)定哪個子元素需通過公式 (an + b) 來選取。
實例:p:nth-child(3n+2) 選取每個第三段,從第二個子元素開始。

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

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

jQuery替換p標簽為h2標簽,內容不變

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

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

相關文章

最新評論