nth-child的一些特别使用技巧

使用 :nth-child() 选择器匹配属于其父元素的某个、间隔、某段子元素

在括号填入第几个子元素，就选取第几个子元素

css

.foo:nth-child(2) {
  color: #f33;
}

效果

通过 2n + 1 选取奇数位的子元素，修改数字改变间隔

css

.foo:nth-child(2n + 1) {
  color: #f33;
}

效果

选取从第3个开始到最后这段子元素

css

.foo:nth-child(n + 3) {
  color: #f33;
}

效果

// 或者

选取从开始到第3个这段子元素

注意：-n 不能够分开

css

.foo:nth-child(-n + 3) {
  color: #f33;
}

效果

利用上面的方法选取公共部分

注意：-n 不能够分开

css

.foo:nth-child(-n + 4):nth-child(n + 2) {
  color: #f33;
}

效果

Object构造函数的方法