css - 我怎样才能“斑马条纹”CSS 列？

Question

假设我有以下标记：

<ul class="mycolumns">
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    ...
    <li>Text</li>
    <li>Text</li>
</ul>

以及以下 CSS（假设前缀）：

.mycolumns {
    column-count: 3;
    column-gap: 10px;
}

我怎样才能“斑马条纹”奇数列？这是我认为正确的小提琴（注意我使用 SCSS 作为我的 CSS）

score 1 · Accepted Answer

如果你不能用 CSS 做，jQuery 总是可以帮助你。

您可以使用jQuery Columnizer 插件来执行相同的任务，但由于它将列包装在实际元素中，您可以通过 CSS 定位各个列：

.column:nth-child(odd) {
  background-color: rgb(255, 200, 200);
}

1 回答 1