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

:nth-last-child() 选择器用于选择所有元素，它们是其父^{元素的第 n 个最后一个子元素。}元素的计数从最后一个元素开始。

句法：

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

参数： :nth-last-child() 选择器包含以下列出的参数：

• n：它保存所选元素的子索引号。计数从结束开始。第一个孩子的索引号是1。
• even：它选择所有偶数子元素。
• 奇数：它选择所有奇数子元素。
• 公式：用于指定选择子元素的公式。公式可以是(an + b)的形式。

下面的例子说明了 jQuery 中的 :nth-last-child() 选择器：

示例 1：本示例将其父标题（div 标签）的倒数第二个标题的背景颜色更改为绿色，将文本颜色更改为白色。

  
  
     
         
            jQuery | :nth-last-child() Selector
        
          
        
        
          
        
        
            $(document).ready(function() {
                $("h4:nth-last-child(2)").css({
                    "background-color": "green", 
                    "color": "white"
                });
            });
        
          
        
            option {
                font-weight: bold;
                font-size: 25px;
                color: green;
            }
            select {
                font-weight: bold;
                font-size: 25px;
                color: green;
            }
        
    
      
      
          
            jQuery | :nth-last-child() Selector
         
          
        
            The first heading in first div.
            The second last heading in first div.
            The last heading in first div.
        
          
        
            The first heading in second div.
            The second last heading in first div.
            The last heading in second div.
                   
      
       

输出：

示例 2：本示例将 标签的倒数第二个标题的背景颜色更改为绿色，将文本颜色更改为白色。

  
  
     
         
            jQuery | :nth-last-child() Selector
        
          
        
        
          
        
        
            $(document).ready(function() {
                $("h4:nth-last-child(odd)").css({
                    "background-color": "green", 
                    "color": "white"
                });
            });
        
          
        
            option {
                font-weight: bold;
                font-size: 25px;
                color: green;
            }
            select {
                font-weight: bold;
                font-size: 25px;
                color: green;
            }
        
     
      
      
          
            jQuery | :nth-last-child() Selector
         
          
        
            The first heading in body.
            The second last heading in body.
            The Third heading in body.
            The Fourth heading in body.
        
      
   

输出：