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

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 可以是一个数字，一个关键字，或者一个公式。

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标签为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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论