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

本文介绍了如何选择重复模式中的一系列元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

假设 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 列(元素).您有三列，因此您需要三个 单独 :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.