这篇文章主要介绍“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)
| 参数 | 描述 |
|---|---|
| n | 要匹配的每个子元素的索引。 必须是一个数字。第一个元素的索引号是 1。 |
| even | 选取每个偶数子元素。 |
| odd | 选取每个奇数子元素。 |
| formula | 规定哪个子元素需通过公式 (an + b) 来选取。 实例：p:nth-child(3n+2) 选取每个第三段，从第二个子元素开始。 |
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如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
