是否可以使用单个声明为所选实体分配迭代属性值？ [英] Is it possible to assign itterating property values to selected entities with a single declaration?

问题描述

下面的代码演示了一个文档，其中有5个绝对定位的5x5像素尺寸的div，通过毯式选择器 .item 以z顺序堆叠在一起。显然，下一步是将它们向右扩展。要做到这一点，我可以简单地添加另一个类到每个div; .one .two .three。 <$ c $在css .one {} 中选择 code> .two {} .three {} .four {} .five {} 应用变量和计算。但是必须是一个更简单的方法。我想象了一种方法来迭代子元素，按顺序分配值，但显然它不工作。我还提供了一个例子。

The code below demonstrates a document with 5 absolutely positioned divs of 5px by 5px dimension stacked on top of each other in z order by the blanket selector .item. Obviously the next step is to spread them out to the right. To do this I could simply add another class to each div; .one .two .three. four. five, and select them in the css .one {} .two {} .three {} .four {} .five{} apply variables and calculations. But there MUST be an easier way. I imagined up a way to iterate over child elements, assigning values in order, but obviously it did not work. I've provided an example below anyway.

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

So is there a way to do that, or at least to produce the same effect? If not, then what is the most efficient way to proceed?

纯CSS是这样一个任务的首选。

Pure CSS is preferred for a task like this.

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

b

推荐答案

假设你不需要使用 overflow：visible 或者需要他们实际上是兄弟姐妹在dom而不是递归的后代，你可以只是嵌套他们。 pos：abs 锚定到父定位对象，因此如果您的父项 left：5px; left：5px; ，你从你的祖父母<$ p $ c> left：10px; 。

Assuming you don't need to not use overflow:visible or need them to actually be siblings in the dom instead of recursive descendants, you can just nest them. pos:abs anchors to the parent positioned object, so if your parent is left:5px;, and you're left:5px;, you're left:10px; from your grandparent.

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

这篇关于是否可以使用单个声明为所选实体分配迭代属性值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！