nth-child的运用

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;
}