如何以重复模式选择一系列元素

Posted 2023-03-06

【中文标题】如何以重复模式选择一系列元素

【英文标题】：How to select a range of elements in repeated pattern

【发布时间】：2015-12-13 22:10:05

【问题描述】：

假设 4 行中有 12 个项目。

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

我想选择并设置第 2 行和第 4 行的样式，我该怎么做？

注意行不在不同的 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中有没有解决这个问题的方法？

【参考方案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 表示法根本不允许构造匹配的表达式描述范围内的元素。

【讨论】：

大坝！！太简单了（干杯），Fiddle 以防万一有人想玩这个。

【参考方案2】：

您不能使用单个选择器执行此操作，需要使用一组 nth-child 选择器，如下面的 sn-p 所示：

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元素。