如何抵消元素的第n个子元素

Question

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

我试过阅读https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child，但无济于事。

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

https://jsfiddle.net/ndga732y/

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个子选择器选择第n个子项很简单，但是如何使用n值创建不同的偏移量，具体取决于它在容器中的顺序？

提前致谢！

Answer 1

遗憾的是，这不可能是普通的CSS。

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

以下是我将如何使用Sass处理它，它将编译为CSS：

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

这是一个快速演示：http://www.sassmeister.com/gist/8af65851d1c404be698f

Answer 2

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

的操作

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