nth-child with mod (or modulo) operator(带有 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 个元素(因为任何正整数 n
的 n mod 7
只会给你 0
到 6
).为此,您可以改用以下公式:
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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:带有 mod(或模)运算符的 nth-child


基础教程推荐
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01