Question

我需要按特定顺序选择元素。我有一个图像轮播，可以有任意数量的图像，但一次只能显示3张图像。我需要在第一张和第三张图片中添加css样式，在第二张图片中添加不同的样式。

下面的代码是我正在寻找的简化版本。我需要它是动态的，因为我不知道轮播会拥有的图像数量。是否有例如nth-of-type(4n-7)的公式可以用来动态定位此订单？

li:nth-of-type(1),
li:nth-of-type(3),
li:nth-of-type(4),
li:nth-of-type(6),
li:nth-of-type(7),
li:nth-of-type(9) {
  color: red;
}


li:nth-of-type(2),
li:nth-of-type(5),
li:nth-of-type(8) {
  color: blue;
}

Answer 1

您要从文本中选择从第二个开始的每三个图像/项目。

如果是，则选择器将为element:nth-of-type(3n+2)

li:nth-of-type(3n+2) {
  color: red;
}

li:nth-of-type(3n) { /* for demo only */
  margin-bottom: 1em;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
</ul>

如何设置nth-of-type（）以特定顺序动态选择元素

1 个答案: