Question

我尝试使用nth-child重复一些CSS规则，如下所示

.pattern-row:nth-child(3) .pattern-keyboard-key,
.pattern-row:nth-child(5) .pattern-keyboard-key,
.pattern-row:nth-child(7) .pattern-keyboard-key,
.pattern-row:nth-child(10) .pattern-keyboard-key,
.pattern-row:nth-child(12) .pattern-keyboard-key
/*
,.pattern-row:nth-child(15) .pattern-keyboard-key,
.pattern-row:nth-child(17) .pattern-keyboard-key,
.pattern-row:nth-child(19) .pattern-keyboard-key,
.pattern-row:nth-child(22) .pattern-keyboard-key,
.pattern-row:nth-child(24) .pattern-keyboard-key,

...
*/
{
border-top: 0;
border-top-right-radius: 0;
background-color: yellow;
}

我发现nth-child(an+b)循环规则，但它不符合我的需要，因为序列不是线性的。

Answer 1

您可以使用单独的:nth-child选择器定位5步序列中的每个数字。

e.g。 12n - 9将匹配3,15,27,39等

.pattern-row:nth-child(12n - 9) .pattern-keyboard-key,
.pattern-row:nth-child(12n - 7) .pattern-keyboard-key,
.pattern-row:nth-child(12n - 5) .pattern-keyboard-key,
.pattern-row:nth-child(12n - 2) .pattern-keyboard-key,
.pattern-row:nth-child(12n) .pattern-keyboard-key {
    /* do stuff */
}

这是一个小提琴：

https://jsfiddle.net/mvve6kub/

如何在CSS中重复无限序列的nth-child规则

1 个答案: