html - 使用 css nth-child 选择每第 6 个和第 7 个元素的有效方法是什么

Question

我正在使用 css nth-child 选择器尝试为无序列表中的每第 6 个和第 7 个元素添加 20px 的边距。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
          X X        X  X           X  X           X  X

到目前为止，我已经通过使用两个单独的 css 选择器完成了此操作:

li:nth-child(5n+6){}
li:nth-child(5n+7){}

有没有办法只使用一个 nth-child 公式来完成这种模式？

Answer 1

没有。基本函数 y = ax+b 将 x 的整数值映射到均匀间隔的值 y。您的目标元素间距不均匀。

因此，你必须使用li:nth-child(5n+6),li:nth-child(5n+7)，没有简化的可能。