如何为 CSS 中的无限序列重复第 n 个子规则

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 步序列中的每个数字。

例如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 */
}

这是一个fiddle:

https://jsfiddle.net/mvve6kub/

如何为 CSS 中的无限序列重复第 n 个子规则

How to repeat nth-child rules for an infinite sequence in CSS

css

css-selectors