CSS参考手册
选择 | Selectors
:nth-last-child
该:nth-last-child(an+b)
CSS伪类匹配的是一个在它之后有an+b-1
个的同胞元素的元素,其中n
是正数或零。它本质与:nth-child
是一样的,除了它从后向前计数项目而不是从前往后。
/* 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
对于其参数的语法有更全面的描述。
语法
: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
<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 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 |
? |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。