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

这会起作用