html - 在 SASS 中，我想更改每一偶数行元素的背景颜色

Question

在 SASS 中，我想更改每个偶数行元素的背景颜色。

这是我的 HTML 显示一行 3 项的 GridView

<ul>
 <li><li> <li><li> <li><li>
 <li><li> <li><li> <li><li>
 <li><li> <li><li> <li><li>
 <li><li> <li><li> <li><li>
</ul>

这是我的 SASS 尝试:

.ul {
  li {
    background: $white;

    &:nth-child(3) {
        background: red;
    }
  }
}

问题:上面的例子只做了第三项。

我想要的结果:

每一行有3里我希望每隔一排 li 的背景颜色为红色。为了在 SASS 中实现这一点，我可以在 :nth-child 上做一些数学运算吗？

Answer 1

这个有效:

ul {
  li {
    background: white;

        &:nth-child(6n-2), &:nth-child(6n-1),&:nth-child(6n) {
        background: red;
    }
  }
}

另请注意，您使用的是 .ul 而不是 ul