Question

下面的代码演示了一个文档，其中5个绝对定位的div为5px x 5px维度，由毯子选择器.item按z顺序堆叠在一起。显然，下一步是将它们分散到右边。要做到这一点，我可以简单地为每个div添加另一个类; .one .two .three. four. five，并在css .one {} .two {} .three {} {{1}中选择它们} .four {}应用变量和计算。但必须有一个更简单的方法。我想象了一种迭代子元素的方法，按顺序分配值，但显然它不起作用。无论如何，我在下面提供了一个例子。

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

对于像这样的任务，首选纯CSS。

＆＃13;

.five{}

＆＃13;

.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; }

＆＃13;

Answer 1

假设您不需要使用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>

是否可以使用单个声明将迭代属性值分配给选定的实体？

1 个答案: