CSS选择器在2个元素之后跳跃1个元素

Question

所以，我只想在某些元素上使用一些CSS值，如下所示：

2,3, 5,6, 8,9, 11,12 etc. (numbers being the elements)

我用Google搜索了很多，但我无法找到该怎么做。

Answer 1

您可以使用nth-child选择器3n和3n+2作为参数。 3n选择编号为3,6,9,12的所有元素...而3n+2选择编号为2,5,8,11的元素。

li:nth-child(3n+2),
li:nth-child(3n) {
  color: red;
}

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

Answer 2

选择所有元素，但不选择:nth-child(3n + 1)

的元素

:not(:nth-child(3n + 1))

以便排除位置1,4,7,10 ...

中的元素

  

Codepen Demo