如何抵消元素的第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