CSS 从最后一个元素向上选择

Question

我有一个最多可以包含 5 个项目的列表。

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
 <li>Five</li>
</ul>

每个列表项的宽度将增加10%。我正在使用：

ul li:nth-child(1) {
  width: 60%;
}
ul li:nth-child(2) {
  width: 70%;
}
ul li:nth-child(3) {
  width: 80%;
}
ul li:nth-child(4) {
  width: 90%;
}
ul li:nth-child(5) {
  width: 100%;
}

最后一项应该是100%

但是当我的列表项少于 5 个时会发生什么？例如，如果有 3 个列表项，最后一个将是 80%，而不是 100%；

我尝试使用：

ul li:last-child {
  width: 100%;
}

这使得最后一项全宽，但前面的将不遵守10% 递增规则。

有什么办法可以做...

ul li:last-child {
  width: 100%;
}
ul li:first-before-last {
  width: 90%;
}
ul li:second-before-last {
  width: 80%;
}
ul li:third-before-last {
  width: 70%;
}

等等……

我正在尝试仅使用 CSS 来实现这一点。

注意：颠倒一切并从100% 的第一个开始，然后向下不是一个选项。最后一个必须是 100% 并首先增加它。它只是为一些类似的动画设置的。改不了了

Answer 1

颠倒逻辑，使用:nth-last-child伪类从最后一个元素开始设置width。

这种方法需要设置与列表项的最大基数一样多的选择器。

li:nth-last-child(n + 1) {
   width: 100%
}

li:nth-last-child(n + 2) {
   width: 90%
}

li:nth-last-child(n + 3) {
   width: 80%
}

li:nth-last-child(n + 4) {
   width: 70%
}

li:nth-last-child(n + 5) {
   width: 60%
}

li:nth-last-child(n + 6) {
   width: 50%
}



li { border: 1px #9cb solid; }

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
 <li>Five</li>
</ul>



<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
</ul>