css - 如何使我的元素淡出计数越高？

Question

我的 HTML 看起来像这样..

<div class=chocolateSandwich>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

所以我希望项目 5 是最不可见的 IE 不透明度 .1 和项目 1 说不透明度 1 或 .9 .. 我显然可以根据每个硬编码的子编号的值来做到这一点，但我觉得CSS有一种方法可以说给定对象的计数，然后应用较低的不透明度值。

一个非优雅的解决方案是拥有 css 规则..

.chocolateSandwich:nth-child(4) { opacity:.1 }
.chocolateSandwich:nth-child(3) { opacity:.3 }
.chocolateSandwich:nth-child(2) { opacity:.5 }
.chocolateSandwich:nth-child(1) { opacity:.7 }
.chocolateSandwich:nth-child(0) { opacity:.9 }

Answer 1

这不能单独使用 CSS 来实现，您可以使用 LESS CSS，这将变得非常容易。如果你不想使用 LESS CSS，你可以使用 JavaScript 或 jQuery。

这是一个链接： http: //lesscss.org/

如果你不明白，请告诉我，我会用 LESS 编写代码。

祝你好运：D