Question

我需要永久地向每三个div添加样式，但是在选择器方面遇到了麻烦

我尝试为每三个div显式编写选择器，但我认为这不是可扩展的

        &:nth-child(-n + 3) {
            background: #000;
        }
        &:nth-child(n + 4) {
            background: red;
        }
        &:nth-child(n + 7) {
            background: #000;
        }
        &:nth-child(n + 10) {
            background: red;
        }

没有错误，只是代码无法很好地扩展。

Answer 1

您可以这样写： nth-child(kn) 其中k是您想要的模。在这种情况下3：

.container div{
  background: yellow;
  height: 10px;
  margin: 5px;
}
.container div:nth-child(3n){
  background: orange;
  height: 30px;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS选择1、2、3、7、8、9、13、14、15等

1 个答案: