CSS :nth-last-child() 伪类
- Rejea kipande chao :nth-child()
- Pya ja :nth-last-of-type()
- Rejea kipande chao Kitabu cha maelezo cha kusimamia cha maelezo
定义和用法
CSS :nth-last-child(n)
伪类用于匹配作为其父元素倒数第 n 个子元素的每个元素,无论其类型如何。
n 可以是一个数字/索引、一个关键字(kipimo cha kwanza
或 kipimo kimea
)或一个公式(如 an + b)。
提示:查看 :nth-last-of-type()
伪类以选择作为其父元素中指定类型的倒数第 n kampi cha kipimo cha kwanza cha kina elementi.
实例
例子 1
为每个作为其父元素倒数第二个子元素的 <p> 元素指定背景颜色:
p:nth-last-child(2) { background-color: red; }
例子 2
kipimo cha kwanza
na kipimo kimea
是关键字,可用于匹配索引为奇数或偶数的子元素。
在这里,我们为倒数索引为奇数和偶数的 <p> 元素指定不同的背景颜色:
p:nth-last-child(odd) { background-color: red; } p:nth-last-child(even) { background-color: blue; }
例子 3
使用公式(an + b)。描述:a 表示整数步长,n 是从 0 开始的所有非负整数,b 是整数偏移量。
在这里,我们为倒数索引是 3 的倍数的所有 <p> 元素指定背景颜色:
p:nth-last-child(3n+0) { background-color: red; }
CSS 语法
:nth-last-child(index | kipimo cha kwanza | kipimo kimea | an+b) { css declarations; }
技术细节
版本: | CSS3 |
---|
浏览器支持
数字在表格中指定了完全支持该伪类的第一个浏览器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
- Rejea kipande chao :nth-child()
- Pya ja :nth-last-of-type()
- Rejea kipande chao Kitabu cha maelezo cha kusimamia cha maelezo