css递增第n个子属性值

68bkxrlz  于 2023-02-10  发布在  其他
关注(0)|答案(2)|浏览(170)

是否有方法使用nth-child(n)中的n递增属性值,以输出以下结果:

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;
}
9fkzdhlc

9fkzdhlc1#

如果使用类似sasspreprocessor,则可以。
举个例子:

div {
  $var: 5;

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

演示:http://sassmeister.com/gist/7d7a8ed86e857be02d1a
另一种实现方法是:

div {

  $list: 1 2 3 4 5;

  @each $i in $list {
    &:nth-child(#{$i}) {
      top: -5px * $i;
    }
  }
}

演示:https://www.sassmeister.com/gist/fb5ee7aa774aafb896cd71a828882b99

vawmfj5a

vawmfj5a2#

我可以通过将选择器移到XPath来增加第n个孩子(n),这当然不是最优的,但它可以工作。
我的scraping代码的XPath如下所示:
对于(B=1; b〈5;B++){等待页面.waitForXPath('//[包含(concat(““,@class,““),concat(““,“table__tr”,““))和(((计数(前面的兄弟节点::)+ 1)= '+b +')和父节点::)]//[包含(concat(““,@class,““),concat(““,“table_td”,““)]');

let elhandle = await page.$x('//*[contains(concat( " ", @class, " " ), concat( " ", "table__tr", " " )) and (((count(preceding-sibling::*) + 1) = '+b+') and parent::*)]//*[contains(concat( " ", @class, " " ), concat( " ", "table__td", " " ))]');

    let game = await page.evaluate(el => el.textContent, elhandle[0]);
    let ddd = await page.evaluate(el => el.textContent, elhandle[1]);
    oo = oo + '{","game":" ' + game +' ","date":" ' + ddd + ' "}, \n'

} // B
注意XPath允许B变量递增

相关问题