• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :nth-last-child(index/even/odd/equation)

    选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。

    jQuery(":nth-last-child(index/even/odd/equation)")

    index:每个相匹配子元素的索引值,从最后一个开始(1),也可以是字符串evenodd,或一个方程式(例如:nth-last-child(even),:nth-last-child(4n))

    因为jQuery的实现:nth-child(n)是严格来自CSS规范,所以n值是“1索引”,也就是说,从1开始计数。对于所有其他选择器表达式,jQuery遵循JavaScript的“0索引”的计数。因此,给定一个单一<ul>包含两个<li>$('li:nth-child(1)')选择第一个<li>,而$('li:eq(1)')选择第二个。

    这个不寻常的用法,可进一步讨论中找到W3C CSS specification.

    例子

    在每个匹配的ul中查找倒数第二个li,并将它标记出来。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { float:left; }
      span { color:blue; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div>
      <ul>
        <li>John</li>
        <li>Karl</li>
        <li>Adam</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>Dan</li>
      </ul>
    </div>
    <div>
      <ul>
        <li>Dave</li>
        <li>Rick</li>
        <li>Timmy</li>
        <li>Gibson</li>
      </ul>
    </div>
    <script>$("ul li:nth-last-child(2)").append("<span> - 2nd to last!</span>");</script>
     
    </body>
    </html>