html - 制作一个具有逐渐增加的 CSS 属性的元素列表

Question

我正在处理一个 HTML table 渲染，这样所有 rows 都是 position absolute 并且渐进增加 top 属性。

.table{
  position: relative;
}
tr{
  position: absolute;
  height: 25px;
  text-align: center;
}
td, th{
  width: 80px;
}
tr:nth-child(1){
  top: 0;
}
tr:nth-child(2){
  top: 25px;
}
tr:nth-child(3){
  top: 50px;
}

<table>
<tr>
  <th>header 1</th>
  <th>header 2</th>
  <th>header 3</th>
</tr>
<tr>
  <td>c1</td>
  <td>c2</td>
  <td>c3</td>
</tr>
<tr>
  <td>c11</td>
  <td>c22</td>
  <td>c33</td>
</tr>

我想做类似 tr:nth-child(n){top: n*25px;} 的事情，而不是对每一行重复它。有没有办法使用纯 CSS 来做到这一点？

我知道这不是渲染表格的正确方法，我仍然很好奇是否有办法实现它。

Answer 1

只有纯 css 你做不到...

你可以用 sass 文件来做:

参见此处:https://jsfiddle.net/vpj3ek24/1/

 .table{
  position: relative;
}
tr{
  position: absolute;
  height: 25px;
  text-align: center;
}
td, th{
  width: 80px;
}
 @mixin child($n) {
     &:nth-child(#{$n}){
         top:$n*25px;
     }
 }

 div{
     @include child(n);
    }