编写此 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

不使用预处理器就不能这样做。

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

例子：

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

 <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>