假设有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,或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表示法根本不允许构造这样的表达式匹配所述范围内的元素.
