如何使用ntn-child实现选中2个元素后跳过1个的重复效果

可以通过 :nth-child() 实现你要的循环排列效果，核心逻辑是匹配每3个元素为一个周期，选中前2个、跳过第3个。

实现原理 #

CSS :nth-child(an + b) 语法中，a 代表匹配周期，b 代表周期内的偏移量，计数从1开始。你需要的◼◼◻循环周期为3，刚好可以通过3周期的匹配规则实现。

代码示例 #

方案1：直接选中需要跳过的元素（匹配所有第3、6、9...位） #

/* 以下选择器会选中每3个里的第3个元素，你可以给它设置对应◻的样式 */
.element:nth-child(3n) {
  /* 举个例子：设置为透明隐藏，或者其他你要的跳过样式 */
  opacity: 0;
  visibility: hidden;
}

方案2：选中需要保留样式的元素（匹配所有第1、2、4、5、7、8...位） #

/* 分别匹配每个周期的第1位和第2位，设置对应◼的样式 */
.element:nth-child(3n + 1),
.element:nth-child(3n + 2) {
  /* 举个例子：设置黑色背景模拟方块 */
  background: #000;
  width: 20px;
  height: 20px;
}

两种方案都可以实现你要的◼◼◻无限循环排列效果，你可以根据自己的业务场景选择使用。

内容的提问来源于stack exchange，提问作者lisovskiy329