使用加性变换对兄弟元素进行样式化答案

【问题标题】：Stylize sibling elements with additive transforms使用加性变换对兄弟元素进行样式化
【发布时间】：2019-07-29 12:02:16
【问题描述】：

我一直在尝试实现以下目标，而不必声明所有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 被设置为“附加属性”，这个 sn-p 应该可以工作：

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 实现上述目标吗？

提前致谢。

【问题讨论】：

这里只需要转换，或者它可以是通用的？
嘿@TemaniAfif ！你总是在那里... :) 事实上，我选择transform 是因为我们可以用它做很多事情。如果它可以应用于transform，为什么不能应用于另一个属性？
通过变换，我们可能会使用更通用的变换结合一些视角等（一些技巧......）来近似你想要的东西，因为我认为你想要的东西是不可能的，挑战在某种程度上是和你之前的问题一样。兄弟元素之间没有办法表达值，只有嵌套元素可能有某种关系。
@TemaniAfif 是的，也许我正在尝试突破极限。 :)
@TakitIsy 是否允许使用 js 或者您希望这仅适用于 css 选择器，我不确定仅使用普通 css 选择器是否可以解决此问题

标签： html css

【解决方案1】：

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

但是，CSS 预处理器（如 less 或 Sass）中有循环，您可以在其中迭代列表并使变换值变小或变大。

Less Loops

【讨论】：