CSS自动增量值

Question

我需要我的div自动淡出，具体取决于div的数量。这个CSS有效，但有一个更清洁的自动方式，每个下一个div减少0.1的值？无论div的数量是多少？

此示例仅适用于我指定的div。

div:nth-of-type(2) {
  opacity:0.9
}
div:nth-of-type(3) {
  opacity:0.8
}
div:nth-of-type(4) {
  opacity:0.7
}
div:nth-of-type(5) {
  opacity:0.6
}
div:nth-of-type(6) {
  opacity:0.5
}

我需要像

这样的东西

div:nth-child {
   opacity: n * 0.1
}

如果我使用SCSS或LESS变量，它仍然只适用于固定数量的div。

Answer 1

如果你想使用js

 var div = document.getElementById("id").children();

  for(x=0; x<div.length; x++) {
     div[x].style.opacity = (10-x)/10;
   }

这将有效