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

:nth-last-child(n)选择器语法

$('selector:nth-last-child(n)')

:nth-last-child(n)选择器语法解析

jQuery中,:nth-last-child(n)选择器配合selector选择器联合工作,假设selector是元素p选择器,如此,jQuery将先通过该选择器匹配选择HTML文档中所有的p元素,并集合成一个序列,接着,:nth-last-child(n)选择器开始工作,进行对该元素序列进行二次选择,查找所有p元素指向的父元素中的"倒数"第n个子元素,最后,匹配条件来了,即如果该子元素为p元素,则会被匹配选择,如果不是p元素,则不会被匹配选择。具体的可参考下方实例代码。

:nth-last-child(n)选择器实例代码

如下实例代码,通过类属性值为b的选择器匹配选择所有div元素中的p元素,接着通过:nth-last-child(1)选择器,匹配p元素的父元素,即div中的倒数第一的子元素,因为第一个div中的最后一个子元素为span,因此不会被选择:

<div>
  <p class="b">段落1</p>
  <span>span</span>
</div>
<div>
  <p class="b">段落2</p>
  <p class="b">段落3</p>
</div>
<button id="nth" class="btn">jQuery</button>

<script>
  $('#nth').click(function(){
    $('.b:nth-last-child(1)').css("font-size","3.5em");
  })
</script>

免责声明:内容仅供参考,不保证正确性!


全栈前端 / jQuery教程 :






Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.