本文深入解析CSS3与jQuery中的nth-child伪类选择器，涵盖直接匹配、倍数匹配、公式匹配及奇偶匹配等多种用法。通过具体的HTML结构示例，演示如何利用该选择器实现网页元素的隔行变色效果，并结合jQuery代码展示如何动态修改DOM元素类型与样式，帮助开发者快速掌握精准选择DOM节点的技巧。
nth-child()作为CSS3定义的伪类选择器，其语法被jQuery部分继承，使得开发者能够通过标签名、属性或内容对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 可以是具体的数字、关键字（如odd/even）或一个数学公式。
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标签为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内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！