如何选择重复图案中的一系列元素

  • Z时代
  • 2024-01-10
  • 分类：问答

假设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中对此有什么解决方案吗？

回答：

这是一个常见的问题，但是我想指出的是，之所以: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表示法根本不允许构建与所述范围内的元素匹配的表达式。

以上是 如何选择重复图案中的一系列元素 的全部内容， 来源链接： utcz.com/qa/406788.html

回到顶部