Skip to content

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

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

选取某个子元素

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

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

效果

  • 1
  • 2
  • 3
  • 4
  • 5

选取间隔子元素

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

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

效果

  • 1
  • 2
  • 3
  • 4
  • 5

选取某段子元素

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

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

效果

  • 1
  • 2
  • 3
  • 4
  • 5

// 或者

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

注意:-n 不能够分开

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

效果

  • 1
  • 2
  • 3
  • 4
  • 5

选取中间某段子元素

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

注意:-n 不能够分开

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

效果

  • 1
  • 2
  • 3
  • 4
  • 5

创建时间:

最近更新:

canvas 地图开发总结

canvas 地图开发总结

之前沉迷 minecraft,起初是玩游戏时觉得下界交通太复杂,容易迷失方向。于是就想统计一份线性地图来提供参考。最初只是简单的图片,但随着服务器肝帝愈来愈多,这种简单的图片已经满足不了数据更新的需求(手动统计加上绘图实在太麻烦了)