位置：首页>> 网络编程>> JavaScript>> jquery和css3中的选择器nth-child使用方法和用途示例

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

作者：yin　　发布时间：2024-04-25 13:11:35　

标签：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)

参数	描述
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>

投稿