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如果设置为“附加属性”，此代码段应该可以工作：

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 来完成它，但是......<br> 没有任何技巧可以使上述内容仅通过 CSS 成为可能吗？

提前致谢。

标签： htmlcss

Answer 1

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

然而，CSS 预处理器中存在循环，例如 less 或 Sass，您可以在其中迭代列表并使变换值变小或变大。

更少的循环