概述:
:nth-child(an+b)
这个 CSS 伪类首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为第(an+b)个元素的集合(n=0,1,2,3...)。示例:
a
和 b
都必须为整数,并且元素的第一个子元素的下标为 1。换言之就是,该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是,an
必须写在 b
的前面,不能写成 b+an
的形式。
0n+3
或简单的3
匹配第三个元素。1n+0
或简单的n
匹配每个元素。(兼容性提醒:在 Android 浏览器 4.3 以下的版本n
和1n
的匹配方式不一致。1n
和1n+0
是一致的,可根据喜好任选其一来使用。)2n+0
或简单的2n
匹配位置为 2、4、6、8...的元素(n=0时,2n+0=0,第0个元素不存在,因为是从1开始排序)。你可以使用关键字even
来替换此表达式。2n+1
匹配位置为 1、3、5、7...的元素。你可以使用关键字odd
来替换此表达式。3n+4
匹配位置为 4、7、10、13...的元素。
示例:
tr:nth-child(2n+1)
表示HTML表格中的奇数行。
tr:nth-child(odd)
表示HTML表格中的奇数行。
tr:nth-child(2n)
表示HTML表格中的偶数行。
tr:nth-child(even)
表示HTML表格中的偶数行。
span:nth-child(1)
表示父元素中子元素为第一的并且名字为span的标签被选中
span:nth-child(-n+3)
匹配前三个子元素中的span元素。
更多参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Element