带有 mod(或模)运算符的 nth-child

nth-child with mod (or modulo) operator(带有 mod(或模)运算符的 nth-child)
本文介绍了带有 mod(或模)运算符的 nth-child的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

是否可以将 nth-child 与模一起使用?我知道你可以指定一个公式,比如

Is it possible to use the nth-child with modulo? I know you can specify a formula, such as

nth-child(4n+2)

但我似乎无法找到是否有模运算符.我已经尝试了以下示例,但似乎都不起作用:

But I can't seem to find if there's a modulo operator. I've tried the following examples below, and none seem to work:

nth-child(n%7)
nth-child(n % 7)
nth-child(n mod 7)

推荐答案

不,:nth-child() 只支持加减法和系数乘法.

我猜你正在尝试获取前 6 个元素(因为任何正整数 nn mod 7 只会给你 06).为此,您可以改用以下公式:

I gather you're trying to pick up the first 6 elements (as n mod 7 for any positive integer n only gives you 0 to 6). For that, you can use this formula instead:

:nth-child(-n+6)

通过否定n,元素计数从零开始倒数,所以这些元素会被选中:

By negating n, element counting is done backwards starting from zero, so these elements will be selected:

 0 + 6 = 6
-1 + 6 = 5
-2 + 6 = 4
-3 + 6 = 3
-4 + 6 = 2
-5 + 6 = 1
...

jsFiddle 演示

这篇关于带有 mod(或模)运算符的 nth-child的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)
@fontface in IE7 (IETEster) not working properly(IE7 (IETEster) 中的@fontface 无法正常工作)
Safari 5.1 breaks CSS table cell spacing(Safari 5.1 打破 CSS 表格单元格间距)
How to delegate `hover()` function by using `on()`(如何使用 `on()` 委托 `hover()` 函数)
How to center slider in css?(如何在css中居中滑块?)
Show slider range value on top of thumb(在拇指顶部显示滑块范围值)