CSS增量第n个孩子的属性值 [英] css increment nth-child attribute values

问题描述

有没有办法来增加在用正属性值第n个孩子（N）来输出的结果是：

  DIV：第n个孩子（1）{
    顶部：-5px;
}
DIV：第n个孩子（2）{
    顶部：-10px;
}
DIV：第n个孩子（3）{
    顶部：-15px;
}
DIV：第n个孩子（4）{
    顶部：-20px;
}
DIV：第n个孩子（5）{
    顶部：-25px;
}
 

解决方案

您可以如果你使用了 preprocessor ​​如上海社会科学院。

一个例子：

  DIV {
  是$ var：5;  @for I $ 1到5 {
    ＆安培;：第n个孩子（＃{$ I}）{
      顶部： - ＃$ {VAR}像素;
      是$ var：$ VAR + 5;
    }
  }
}
 

一个演示： http://sassmeister.com/gist/7d7a8ed86e857be02d1a

Is there a way to increment attribute values using n in nth-child(n) to output the result of:

div:nth-child(1){
    top: -5px;
}
div:nth-child(2){
    top: -10px;
}
div:nth-child(3){
    top: -15px;
}
div:nth-child(4){
    top: -20px;
}
div:nth-child(5){
    top: -25px;
}

解决方案

You could if you use a preprocessor like sass.

An example:

div {
  $var: 5;

  @for $i from 1 through 5 {
    &:nth-child(#{$i}) {
      top: -#{$var}px;
      $var: $var + 5;
    }
  }
}

A demo: http://sassmeister.com/gist/7d7a8ed86e857be02d1a

这篇关于CSS增量第n个孩子的属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！