作者:日后再曰 | 来源:互联网 | 2023-08-18 10:47
本文由编程笔记#小编为大家整理,主要介绍了CSS3 之:nth-child() 选择器相关的知识,希望对你有一定的参考价值。

:nth-child() 选择器
:nth-child() 是一个结构伪类函数,它可以选择某个元素包含的一个或多个特定的子元素。
eg:
标题
段落1
段落2
段落3
段落4
屏幕截图如下:

例:
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
n 可以是数字、关键词或公式。
odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
eg:
标题
段落1
段落2
段落3
段落4
屏幕截图如下:
例:
使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
eg:
标题
段落1
段落2
段落3
段落4
段落5
段落6
段落7
段落8
段落9
屏幕截图如下: