如何选择具有进展的第n个元素？

Question

我想在某些进程中选择子元素。但只使用CSS。

例如，需要选择以下元素：

1,2,4,8,16,32,64,128等......

要么

1,3,9,27,81等......

<div class="parent">
    <div class="child">some content</div>
    <div class="child">some content</div>
    <div class="child">some content</div>
    ... thousands probably of such children ...
    <div class="child">some content</div>
    <div class="child">some content</div>
    <div class="child">some content</div>
</div>

Answer 1

根据要求使用SCSS，您可以执行以下操作（while循环）：

$i: 1;

@while $i < 100 {

    .test:nth-child(#{$i}) {
        background: blue;
    }

    $i: $i * 3;

}

那将编译并提供以下输出：

.test:nth-child(1) {
  background: blue; }

.test:nth-child(3) {
  background: blue; }

.test:nth-child(9) {
  background: blue; }

.test:nth-child(27) {
  background: blue; }

.test:nth-child(81) {
  background: blue; }

这证明了您的第二个用例。至于第一个，你只需要改变计算$i到$i: $i * 2;的公式