时间戳

首页 > 解决方案 > 如何为每个第 n 个元素添加不同的 CSS 样式，具体取决于使用 LESS 的 n

css - 如何为每个第 n 个元素添加不同的 CSS 样式，具体取决于使用 LESS 的 n

问题描述

我正在尝试为 div 中的后续元素添加不同的填充。我的 DOM 看起来很简单。

<div class="parent">
   <div>0</div>
   <div>15</div>
   <div>30</div>
   ...
</div>

所以我想让我的第一个元素有 0 填充，我的第二个 15，第三个 30 等。使用LESS，我怎么能做到这一点？我努力了：

.parent div:nth-of-type(n) {
           padding-left: n*15px;
}

谢谢！

标签： csslesspadding

解决方案

我想你想在视觉上实现一个楼梯。在这种情况下，您可以执行以下操作：

.parent {
  line-height: 1.2em;
}

.parent>div:not(:first-child)::before {
  content: "";
  float: left;
  width: 15px; /*your padding*/
  height: calc(1.2em + 2px);

}
<div class="parent">
  <div>0</div>
  <div>15</div>
  <div>30</div>
  <div>45</div>
  <div>60</div>
  <div>75</div>
</div>

推荐阅读