写这个CSS的更好方法是什么？

Question

每个下一个H4孩子都会增加10％到顶部。只是好奇是否有更好/更好的方式来写这个？

h4:nth-child(1){top: 0%}
h4:nth-child(2){top: 10%}
h4:nth-child(3){top: 20%;}
h4:nth-child(4){top: 30%;}
h4:nth-child(5){top: 40%;}
h4:nth-child(6){top: 50%;}
h4:nth-child(7){top: 60%;}
h4:nth-child(8){top: 70%;}
h4:nth-child(9){top: 80%;}

etc...

Answer 1

如果不使用预处理器，就无法这样做。

替代建议是使用相对定位（可以是defualt，但取决于你的css），如下所示

示例：

＆＃13;

＆＃13;

div#relative h4 {
position:relative;
  top:10%
}

＆＃13;

<div id="relative">
  <h4>one</h4>
   <h4>two</h4>
   <h4>three</h4>
   <h4>four</h4>
   <h4>five</h4>
   <h4>six</h4>
   <h4>seven</h4>
   <h4>eight</h4>
</div>  

＆＃13;

＆＃13;

＆＃13;