html - 使用加法变换风格化兄弟元素

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 被设置为“additive property”，这个片段应该可以工作:

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 上课，但这只会转移问题。

然而，在 less 或 Sass 等 CSS 预处理器中存在循环，您可以在其中遍历列表并使转换值变小或变大。

Less Loops