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

How to select a range of elements in repeated pattern(如何以重复模式选择一系列元素)

问题描述

假设 4 行中有 12 个项目.

Let's say there are 12 items in 4 rows.

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

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

I want to select and style 2nd row and 4th row, How do I do that?

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

Note that rows are not in different HTML elements, in fact they are all an ul li element.

期望的结果:

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

我试过玩这个:

li:nth-child(n+4)

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

It selects all the elements after first three. Then I tried this:

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

这只会选择 4, 5 &6 但我不能重复这种模式来选择 10、11 和12 也一样.在 CSS 中是否有任何解决方案?

This only selects 4, 5 & 6 but I cant repeat this pattern to select 10, 11 & 12 as well. Is there any solution for this in CSS?

推荐答案

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

This is a commonly-asked question, but I wanted to point out that the reason :nth-child(n+4):nth-child(-n+6) only matches one specific range of elements is that it only provides a single start point (n+4) and a single end point (-n+6). The only elements that can be greater than or equal to 4 and less than or equal to 6 are 4, 5 and 6, so it's impossible to match elements outside of this range using the same selector. Adding more :nth-child() pseudos will only narrow down the matches.

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

The solution is to think of this in terms of columns, assuming there will always be exactly 3 columns (elements) per row. You have three columns, so you will need three separate :nth-child() pseudos. Elements 4 and 10 from the first column are 6 elements apart, so the argument to all of the :nth-child() pseudos needs to start with 6n.

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

The +b portion in the An+B expression can either be +4, +5 and +6, or 0, -1 and -2 — they will both match the same set of elements:

• 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 表示法根本不允许构造与所述范围内的元素匹配的表达式.

You cannot do this with a single :nth-child() pseudo-class, or a single compound selector consisting of any combination of :nth-child() pseudos, because the An+B notation simply doesn't allow such expressions to be constructed that match elements in ranges as described.

这篇关于如何以重复模式选择一系列元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！