CSS :nth-last-child() 伪类
示例
为每个作为其父元素的第二个子元素的 <p> 元素指定背景颜色,从最后一个开始计数
p:nth-last-child(2) {
background-color: red;
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
:nth-last-child(n)
伪类匹配元素是其父元素的第 n 个子元素,无论类型如何,从最后一个子元素开始计数。
n 可以是数字/索引、关键字(odd 或 even)或公式(如 an + b)。
提示:查看 :nth-last-of-type() 伪类,用于选择作为其父元素的第 n 个指定类型的子元素,从最后一个子元素开始计数。
版本 | CSS3 |
---|
浏览器支持
表中数字表示该伪类完全支持的第一个浏览器版本。
伪类 | |||||
---|---|---|---|---|---|
:nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS 语法
更多示例
示例
odd 和 even 是关键字,可用于匹配索引为奇数或偶数的子元素。
在这里,我们为奇数和偶数的 p 元素指定了两种不同的背景颜色,从最后一个子元素开始计数
p:nth-last-child(odd) {
background-color: red;
}
p:nth-last-child(even) {
background-color: blue;
}
自己动手试一试 »
示例
使用公式(an + b)。说明:a 表示一个整数步长,n 是所有非负整数,从 0 开始,b 是一个整数偏移值。
在这里,我们为索引是 3 的倍数的所有 p 元素指定背景颜色,从最后一个子元素开始计数
p:nth-last-child(3n+0) {
background-color: red;
}
自己动手试一试 »