css - 是否可以通过单个声明将迭代属性值分配给所选实体？

下面的代码演示了一个文档，该文档具有5个绝对定位的5px x 5px的div，它们由橡皮布选择器.item以z顺序彼此堆叠。显然，下一步是将它们散布到右侧。为此，我可以简单地向每个div添加另一个类。 .one .two .three. four. five，然后在css .one {} .two {} .three {} .four {} .five{}中选择它们，以应用变量和计算。但是必须有一种更简单的方法。我想出了一种遍历子元素，按顺序分配值的方法，但是显然它没有用。无论如何，我在下面提供了一个示例。

那么有没有办法做到这一点，或者至少产生同样的效果？如果没有，那么最有效的方法是什么？

纯CSS首选用于此类任务。

.item {

  outline: 1px solid black; outline-offset: -1px;

  height: 5px;
  width: 5px;

  position: absolute;
  top: 15px;

}

.item:nth-child(iterate[1]) {

  /*impression of desired effect*/
  left: 15px, 25px, 35px, 45px, 55px;

}

/*implementing a naive way*/
.i2 { left:0px; }
.i2 + .i2 { left:10px; }
.i2 + .i2 + .i2 { left:20px; }
.i2 + .i2 + .i2 + .i2 { left:30px; }
.i2 + .i2 + .i2 + .i2 + .i2 { left:40px; }

/*generic wrapper*/
.rel { position:relative; }

non-functioning "iterative" version:
<div class="rel">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<br /><br />
Functioning individual-rules version (what I want):
<div class="rel">
    <div class="item i2"></div>
    <div class="item i2"></div>
    <div class="item i2"></div>
    <div class="item i2"></div>
    <div class="item i2"></div>
</div>

最佳答案

假设您不需要使用overflow:visible或实际上不需要它们成为dom中的同级兄弟（而不是递归后代），则可以嵌套它们。 pos:abs锚定到父级定位的对象，因此，如果父级是left:5px;，而您是left:5px;，则您是祖父母中的left:10px;。

.item {
  outline: 1px solid black; outline-offset: -1px;

  height: 5px;
  width: 5px;

  position: absolute;
  top: 15px;
  left: 15px;

  /*added "safety" rule (hence !important)*/
  overflow:visible !important;
}
.item .item {
  left: 5px;
  top: 0;
}
.item.i2 .item.i2{
  left:10px;
}

/*Because outline includes children even when positioned*/
.i3{
  outline:none;
  box-sizing: border-box;
  border: 1px solid black;
}
.i3 .i3{/*sync with border width*/
  top:-1px;
}

.rel{ position:relative; }

Based on the left rules in the OP:
<div class="rel">
    <div class="item">
        <div class="item">
            <div class="item">
                <div class="item">
                    <div class="item">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br /><br />
Based on an edit suggestion for the "desired effect" by OP:<br />
<div class="rel">
    <div class="item i2">
        <div class="item i2">
            <div class="item i2">
                <div class="item i2">
                    <div class="item i2">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br /><br />
My fix to make the desired effect actually work: <br />
<div class="rel">
    <div class="item i2 i3">
        <div class="item i2 i3">
            <div class="item i2 i3">
                <div class="item i2 i3">
                    <div class="item i2 i3">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

关于css - 是否可以通过单个声明将迭代属性值分配给所选实体？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35895974/