使用加法变换对同级元素进行样式化 [英] Stylize sibling elements with additive transforms

问题描述

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

I've been trying to achieve the following without having to declare all the 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 设置为附加属性，此代码段应该可以工作：

This snippet should probably works if transform was set as an "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？

I know how it can be done by reordering the HTML (but elements won't be siblings anymore) or by using some JavaScript but…
Isn't there any trick that makes the above possible only with CSS ?

预先感谢。

推荐答案

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

Unfortunately not. The only way i would know of is to give every li a class, but that would just shift the problem.

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

However there are loops in CSS Preprocessors like less or Sass, where you could iterate though the list and make the transform value smaller or bigger.

较少循环

这篇关于使用加法变换对同级元素进行样式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！