css - 如何在重复模式中选择一系列元素

Question

假设 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 中有解决这个问题的方法吗？

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() 的任意组合组成的单个复合选择器来执行此操作pseudos，因为 An+B 表示法根本不允许构造与所描述的范围内的元素匹配的表达式。