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