如何选择重复模式中的元素范围

Question

假设有4行中有12个项目.

 |  1   ||  2   ||  3   |
 |  4   ||  5   ||  6   |
 |  7   ||  8   ||  9   |
 |  10  ||  11  ||  12  |

我想选择第二排和第四排,我该怎么做？

请注意,行不在不同的HTML元素中,实际上它们都是ul li元素.

期望的结果:

 |  1   ||  2   ||  3   |
 |--4---||--5---||--6---|
 |  7   ||  8   ||  9   |
 |--10--||--11--||--12--|

我试过玩这个:

li:nth-child(n+4)

它选择前三个之后的所有元素.然后我尝试了这个:

li:nth-child(n+4):nth-child(-n+8)

这只选择了4,5和6但我不能重复这种模式来选择10,11和12.CSS中有这个解决方案吗？

Answer 1

这是一个常见问题,但我想指出,:nth-child(n+4):nth-child(-n+6)只与一个特定范围的元素匹配的原因是它只提供一个起始点(n + 4)和一个单一的终点(-n + 6).唯一可以大于或等于4 且小于或等于6的元素是4,5和6,因此使用相同的选择器不可能匹配此范围之外的元素.添加更多的:nth-child()伪将只会缩小匹配范围.

解决方案是根据列来考虑这一点,假设每行总是有3列(元素).你有三列,所以你需要三个独立的 :nth-child()伪.第一列中的元素4和10分开6个元素,因此所有:nth-child()伪的参数需要以6n开头.

An + B表达式中的+ b部分可以是+ 4,+ 5和+6,或0,-1和-2 - 它们都匹配同一组元素:

• li:nth-child(6n+4), li:nth-child(6n+5), li:nth-child(6n+6)
• li:nth-child(6n), li:nth-child(6n-1), li:nth-child(6n-2)

您不能使用单个:nth-child()伪类或由伪的任意组合组成的单个复合选择器来执行此:nth-child()操作,因为An + B表示法不允许构造与所描述的范围中的元素匹配的此类表达式.

Answer 2

您不能使用单个选择器执行此操作,并且需要使用nth-child下面代码段中的一组选择器:

li:nth-child(6n), li:nth-child(6n-1), li:nth-child(6n-2) {
  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>
</ul>

选择器说明:

• li:nth-child(6n) - 选择第6(= 6*1),第12(= 6*2),第18(= 6*3)个元素,依此类推.
• li:nth-child(6n-1) - 选择第5(=(6*1)-1),第11(=(6*2)-1),第17(=(6*3)-1)个元素,依此类推.
• li:nth-child(6n-2) - 选择第4(=(6*1)-2),第10(=(6*2)-2),第16(=(6*3)-2)个元素,依此类推.

注意:通常n从0开始,但我在解释中将其排除在外,因为我们没有任何第0,第-1或第2个元素.