:nth-last-child

概述

伪类:nth-last-child匹配在文档树中后面有an+b-1个兄弟元素的元素,此时n大于或等于0,并且该元素具有父元素。

 

实际上,该伪类的作用与:nth-child相同,但是其是从后往前选择元素,而不是从前往后。

 

参见:nth-child 了解更多详情。

 

语法

element:nth-last-child(an + b) { 
    /*规则*/
 }

示例

选择器示例

tr:nth-last-child(-n+4)
匹配HTML表格中的最后四行。
span:nth-last-child(even)
从后往前数,匹配所有偶数位置且为span的元素。

完整示例

CSS

table {
  border: 1px solid blue;
}
tr:nth-last-child(-n+3) { /* the last 3 siblings */
  background-color: lime;
}

HTML

<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
       <td>Second line</td>
    </tr>
    <tr>
       <td>Third line</td>
    </tr>
    <tr>
       <td>Fourth line</td>
    </tr>
    <tr>
       <td>Fifth line</td>
    </tr>
  </tbody>
</table>

效果:

标准规范

Specification Status Comment
Selectors Level 4
:nth-last-child
Working Draft No change.
Selectors Level 3
:nth-last-child
Recommendation Initial definition.

兼容

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 3.5 (1.9.1) 9.0 9.5 3.2
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.9.1) 9.0 10.0 3.2

参见

 

文档标签和贡献者

 此页面的贡献者: hutuxu
 最后编辑者: hutuxu,