©
本文档使用 PHP中文网手册 发布
E:nth-last-child(n) { sRules }
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)
有一点需要注意的是：
HTML示例代码：
<div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> </div>
如上HTML，假设要命中倒数第一个p(即正数第3个p)，那么CSS选择符应该是：
p:nth-last-child(2){color:#f00;}而不是：
p:nth-last-child(1){color:#f00;}
因为倒数第1个p，其实是倒数第2个子元素。基于选择符从右到左解析，首先要找到第1个子元素，然后再去检查该子元素是否为p，如果不是p，则n递增，继续查找
假设不确定倒数第1个子元素是否为E，但是又想命中倒数第1个E，应该这样写：
p:last-of-type{color:#f00;}
或者这样写：
p:nth-last-of-type(1){color:#f00;}
参考 E:last-of-type 和 E:nth-last-of-type(n)
| IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|
| 6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
| IE9.0+ |
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:nth-last-child(n)_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
font-size: 16px;
}
li:nth-last-child(1) {
color: #f00;
}
</style>
</head>
<body>
<h1>最后一行要变成红色 <code>li:nth-last-child(1){color:#f00;}</code></h1>
<ul>
<li>结构性伪类选择符 E:nth-last-child(n)</li>
<li>结构性伪类选择符 E:nth-last-child(n)</li>
<li>结构性伪类选择符 E:nth-last-child(n)</li>
</ul>
</body>
</html>
点击 "运行实例" 按钮查看在线实例