jQuery :nth-child() 选择器

实例

选取属于其父元素的第三个子元素的每个 <p> 元素:

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p:nth-child(3)").css("background-color", "yellow");
});
</script>
</head>
<body>
<h2>这是 body 中的标题</h2>
<p>这是 body 中的第一个段落</p>
<p>body 中的第二个段落（以及 body 中的第三个子元素）。</p>
<div style="border:1px solid;">
  <span>div 中的 span 元素</span>
  <p>div 中的第一个段落</p>
  <p>另一个 div 中的第二个段落（以及该 div 中的第三个子元素）。</p>
  <p>div 中的最后一个段落</p>
</div><br>
<div style="border:1px solid;">
   <p>另一个 div 中的第一个段落</p>
   <p>另一个 div 中的最后一个段落</p>
  <p>另一个 div 中的最后一个段落（以及该 div 中的第三个子元素）。</p>
</div>
<p>body 中的最后一个段落</p>
</body>
</html>

运行一下

定义与用法

:nth-child(n) 选择器选择父元素的第 n 个子元素，无论它是什么类型。

提示: 使用 :nth-of-type() 选择器，用于选择父元素的第 n 个子元素（特定类型）。

语法

:nth-child(n|even|odd|formula)

参数	描述
n	要匹配的每个子项的索引必须是数字。第一个元素的索引号为 1
even	选择每个偶数子元素
odd	选择每个奇数子元素
formula	指定要使用公式 (an + b) 选择的子元素。比如: p:nth-child(3n+2) : 从第二个子元素开始，选择每个的第三个段落

jQuery :nth-child() 选择器

实例

定义与用法

语法

更多实例

分类导航