如何偏移元素的第 n 个子元素答案

【问题标题】：How to offset the nth child of an element如何偏移元素的第 n 个子元素
【发布时间】：2016-04-10 01:12:56
【问题描述】：

我正在尝试提取元素的第 n 个子元素，以便元素堆叠在同一个容器中。

我在 jsfiddle 中重新创建了问题，

html:

<table>
  <td>
    <p id="image-1">first content</p>
    <p id="image-2">second content</p>
  </td>
</table>

css:

p:nth-child(0n){
  offset-x: n*2px;
  offset-y: n*2px;
}

我知道选择第 n 个孩子很容易，使用 nth-child 选择器，但是如何使用 n 值创建不同的偏移量，具体取决于它在容器中的顺序？

提前致谢！

【问题讨论】：

标签： html css

【解决方案1】：

不幸的是，这对于纯 CSS 是不可能的。

您可以使用 Javascript 或 CSS 预处理器（也可能是后处理器？）。

这是我使用 Sass 处理它的方法，它将编译为 CSS：

@for $i from 1 through 2 {
  p:nth-child(#{$i}) {
    top: $i * 100px;
    left: $i * 50px;
    position: relative;
  }  
}

【讨论】：

【解决方案2】：

您可以使用向左填充并执行类似

的操作

p:nth-child(2){
 padding-left: 50px;
}

【讨论】：