CSS自动增加值

我需要我的div自动淡出取决于div的数量。这个CSS的工作原理，但有一个更清洁的自动方法，以减少每个下一个div值0.1？不管div的数量是多少？CSS自动增加值

此示例仅适用于我指定的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或更少的变量，它仍然只适用于固定数量的div。

来源

2017-10-08 Kokodoko

考虑使用较少的pourpose –

LESS仅固定数量的div的工作，但div的数量可能会改变。 – Kokodoko

如果你想用js

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

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

这将工作

来源

2017-10-08 16:47:08

谢谢，但我正在寻找一个纯粹的CSS解决方案 – Kokodoko

只有当您可以使用CSS计数器与CSS计算，但这是不可能的。 –

CSS自动增加值

回答

相关问题