如何仅使用 CSS 创建交替列表模式 [重复]

Question

我有一个在 991 像素及以上的屏幕上具有交替颜色图案的项目列表。我正在使用 CSS 来定位每个要更改颜色的子元素。

但是，我的 CSS 看起来不是很优雅，因为项目的数量是未知的，可能有数百个。使用我的 CSS 方法，我必须写出所有可能性以确保保留样式。

有没有一种 CSS 方法可以改进我的方法？

@media screen and (min-width:991px) {

    .item {
        background:darkgrey;
    }

    .item:nth-child(2),
    .item:nth-child(3),
    .item:nth-child(6),
    .item:nth-child(7),
    .item:nth-child(10),
    .item:nth-child(11),
    .item:nth-child(14),
    .item:nth-child(15),
    .item:nth-child(18),
    .item:nth-child(19),
    .item:nth-child(22),
    .item:nth-child(23),
    .item:nth-child(26),
    .item:nth-child(27) ,
    .item:nth-child(30)  {
        background:green;
    }
}

Answer 1

您可以使用functional notation

.item:nth-child(4n+2),
.item:nth-child(4n+3) { background: green }