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和＆amp; 6但是我不能重复这种模式来选择10,11＆amp; 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个元素。

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

2 个答案: