jQuery :nth-last-child() 选择器

实例

属于其父元素的第二个子元素的所有 <p> 元素,从最后一个子元素开始计数:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7. $("p:nth-last-child(3)").css("background-color", "yellow");
  8. });
  9. </script>
  10. </head>
  11. <body>
  12. <h2>这是 body 中的标题</h2>
  13. <p>这是 body 中的第一个段落</p>
  14. <p>body 中的第二个段落(以及 body 中的第三个子元素)。</p>
  15. <div style="border:1px solid;">
  16. <span>div 中的 span 元素</span>
  17. <p>div 中的第一个段落</p>
  18. <p>另一个 div 中的第二个段落(以及该 div 中的第三个子元素)。</p>
  19. <p>div 中的最后一个段落</p>
  20. </div><br>
  21. <div style="border:1px solid;">
  22. <p>另一个 div 中的第一个段落</p>
  23. <p>另一个 div 中的最后一个段落</p>
  24. <p>另一个 div 中的最后一个段落(以及该 div 中的第三个子元素)。</p>
  25. </div>
  26. <p>body 中的最后一个段落</p>
  27. </body>
  28. </html>

定义与用法

:nth-last-child(n) 选择器选择父元素的第 n 个子元素,无论其类型如何,从最后一个子元素开始计算。

提示: 使用 :nth-last-of-type() 选择器,选择从上一个子元素开始算起的父元素的特定类型的第 n 个子元素。


语法

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

更多实例

选择所有 <div> 元素中第一个子元素的每个 <p> 元素,从最后一个子元素开始计数

演示如何选择所有 <div> 元素中第一个子元素的每个 <p> 元素,从最后一个子元素开始计数

使用公式 (an + b)

如何使用公式 (an + b) 来选取不同的子元素,从最后一个子元素开始计数。

使用 "偶数" 和 "奇数"

演示如何使用偶数和奇数来选取不同的子元素,从最后一个子元素开始计数。

:nth-child(), :nth-last-child(), :nth-of-type() and :nth-of-last-type() 选择器的不同点

演示 :nth-child(), :nth-last-child(), :nth-of-type() and :nth-of-last-type() 选择器的不同点

分类导航