CSS3 :nth-child() 选择器
1、下面的语句表示选择someOnediv下的第二个li标签
.someOnediv li:nth-child(2){background:#090}
2、下面的语句表示选择某一同名集合class中的第二个(scss样式中较常见)
... &:nth-child(2) { border-right: none; } ...
3、下面的语句表示选择同名集合中的第一个
... &:first-child { border-radius: 15 * 2rpx 0 0 15 * 2rpx; } ...
4、下面的语句表示选择同名集合中的倒数第一个
... &:lastt-child { border-radius: 15 * 2rpx 0 0 15 * 2rpx; } ...
5、下面的语句表示选择某一同名集合class中的倒数第二个(scss样式中较常见)
.someOne li:nth-last-child(3){background:#090}
6、下面语句表示选取大于等于某数的标签 (scss样式中较常见)
... &:nth-child(n+4) { margin-top: 18rpx;
} ...
7、下面语句表示选取小于等于某数的标签
...
.someOne li:nth-child(-n+4){background:#090}
...
8、下面语句表示选取奇数或者偶数的关键字,odd和even是可用于匹配下标是奇数或者偶数的关键字
p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; }
9、通项公式
使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:
p:nth-child(3n+0) { background:#ff0000; }