Question

我一直在尝试实现以下目的，而不必声明所有的nth-of-type(x)：

li:nth-of-type(2) {
  transform: scale(0.9);
}
li:nth-of-type(3) {
  transform: scale(0.81);
}
li:nth-of-type(4) {
  transform: scale(0.729);
}
li:nth-of-type(5) {
  transform: scale(0.6561);
}

<ul>
  <li>LI 1</li>
  <li>LI 2</li>
  <li>LI 3</li>
  <li>LI 4</li>
  <li>LI 5</li>
</ul>

如果将transform设置为“附加属性”，此代码段应该可以使用：

li ~ li {
  transform: scale(0.9);
}

<ul>
  <li>LI 1</li>
  <li>LI 2</li>
  <li>LI 3</li>
  <li>LI 4</li>
  <li>LI 5</li>
</ul>

我知道如何通过重新排序HTML（但是元素不再是同级元素）或使用一些JavaScript来做到这一点，但是...
难道没有任何技巧可以使仅CSS能够实现上述目标吗？

谢谢。

Answer 1

不幸的是没有。我唯一知道的方法是给每个li上课，但这只会改变问题。

但是，CSS预处理器中有一些循环，例如less或Sass，您可以在其中循环访问列表，并使转换值变小或变大。

Less Loops

使用加法变换对同级元素进行样式化

1 个答案: