首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:nth-last-child

:nth-last-child(an+b)CSS伪类匹配的是一个在它之后有an+b-1个的同胞元素的元素,其中n是正数或零。它本质与:nth-child是一样的,除了它从后向前计数项目而不是从前往后

代码语言:javascript
复制
/* Selects every fourth child element inside the body */
/* regardless of element type */
/* counting backwards from the last one */
body :nth-last-child(4n) {
  background-color: lime;
}

:nth-child对于其参数的语法有更全面的描述。

语法

代码语言:javascript
复制
: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)表示偶数跨度元素,从最后一个元素开始并向后。

示例用法

HTML

代码语言:javascript
复制
<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

代码语言:javascript
复制
table {
  border: 1px solid blue;
}

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

结果

规范

Specification

Status

Comment

Selectors Level 4The definition of ':nth-last-child' in that specification.

Working Draft

Matching elements are not required to have a parent.

Selectors Level 3The definition of ':nth-last-child' in that specification.

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

?

51 (51)1

?

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

?

51.0 (51)1

?

44

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com