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;

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

1 个答案: