Question

我想将"top"值添加到某个类的不同段落中。问题是每个段落必须具有不同的递增值，如"top: 30px + something"，并且会定期增加另一个段落。段落没有唯一的选择器。

  .class p{ //1st element
top: 50px;
    }
   .class p{ //2nd element, and so on...
top: 70px;
    }

有没有办法用LESS自动执行此操作？

Answer 1

无论是LESS还是直接CSS，都无法说出像

这样的内容

parent child:nth-child(n) {
  top: 50px + (10px * n)
}

建议的方法是嵌套。最小的例子看起来像

＆＃13;

div {
  padding-left: 20px
}

＆＃13;

<div>
  <div>first level
    <div>second level
      <div>third level</div>
    </div>
  </div>
</div>

＆＃13;

当然可能更复杂：

＆＃13;

div {
  padding-left: 20px
}

＆＃13;

<div>
  
  <div>
    
    <p>first level</p>
    
    <div>
      
      <p>second level</p>
      
      <div>
        <p>third level</p>
      </div>
      
    </div>
    
  </div>

＆＃13;

等等。

除此之外，如果你坚持

<parent>
  <child/>
  <child/>
<parent>

模型，您可以编写javascript来遍历您的包装并为每个孩子应用填充......但这与您要求的不同

Answer 2

您可以手动为有限数量的元素指定

.class p:nth-child(1) { //1st element
    top: 50px;
}
.class p:nth-child(2) { //2nd element, and so on...
    top: 70px;
}

然而，LESS无法事先知道该页面将包含多少个孩子，因此它无法自动生成所有这些子项。您必须自己编写它们（如上所述）或在页面加载后重新定位JavaScript中的元素。

我不确定你在这里尝试解决的问题，但似乎可以通过使用静态定位方法（而不是绝对定位）并允许固定高度{{1元素在容器内向下推动，而不是间隔地绝对定位它们。

Answer 3

您必须知道段落的数量，否则LESS不可能阅读HTML。如果你知道段落的数量，你可以做一个循环并增加每次迭代的值：

<强> LESS

.paragraphs(4);

.paragraphs(@n, @i: 1) when (@i =< @n) {
  .class p:nth-child(@{i}) {
    top: (@i * 20px + 30);
  }
  .paragraphs(@n, (@i + 1));
}

<强>输出

.class p:nth-child(1) {
  top: 50px;
}
.class p:nth-child(2) {
  top: 70px;
}
.class p:nth-child(3) {
  top: 90px;
}
.class p:nth-child(4) {
  top: 110px;
}

将不同的值（递增）添加到相同类型的不同元素 - LESS CSS

3 个答案: