MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:nth-last-child

概述

:nth-last-child(an+b) 这个 CSS 伪类匹配文档树中在其之后具有 an+b-1 个兄弟节点的元素,其中 n 为正值或零值。它基本上和 :nth-child 一样,只是它从结尾处反序计数,而不是从开头处。

可以在 :nth-child 中查看关于语法参数更详细的描述。

语法

:nth-last-child( <nth> [ of <selector># ]? )

where
<nth> = <an-plus-b> | even | odd

示例

选择器示例

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

完整示例

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>

CSS

table {
  border: 1px solid blue;
}

/* Select the last three elements */
tr:nth-last-child(-n+3) {
  background-color: lime;
}

结果

规范

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

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4 (Yes) 3.5 (1.9.1) 9.0 9.5 3.2
No parent required 57 ? ? ? 44 ?
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) 1.0 (1.9.1) 9.0 10 3.2
No parent required 57 57 ? ? ? 44 ?

相关资料

文档标签和贡献者

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