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如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。