如何用CSS实现列表项宽度从首项递增至末项100%（支持1-5项）？

当然可以解决这个问题！我们可以借助CSS的:nth-last-child()选择器，它能让我们从列表的末尾开始计数选择元素，完美适配你需要的“末项固定100%，前面项依次递增10%”的规则，不管列表有1-5个项都能生效。

最终CSS代码 #

/* 仅当列表有5项时，选中倒数第5个（即第1个）项 */
ul li:nth-last-child(5) {
  width: 60%;
}

/* 列表有4或5项时，选中倒数第4个项 */
ul li:nth-last-child(4) {
  width: 70%;
}

/* 列表有3-5项时，选中倒数第3个项 */
ul li:nth-last-child(3) {
  width: 80%;
}

/* 列表有2-5项时，选中倒数第2个项 */
ul li:nth-last-child(2) {
  width: 90%;
}

/* 所有列表的最后一项强制100%宽度 */
ul li:last-child {
  width: 100%;
}

代码解释 #

这个方案的核心是利用:nth-last-child(k)的特性：它会选中当前元素在父容器中是倒数第k个的元素。这样我们就能针对不同长度的列表，精准给前面的项分配递增的宽度：

• 当列表有5项：第1项是倒数第5个（60%），第2项倒数第4个（70%），第3项倒数第3个（80%），第4项倒数第2个（90%），末项100%
• 当列表有3项：第1项是倒数第3个（80%），第2项倒数第2个（90%），末项100%
• 当列表只有1项：直接匹配last-child，宽度100%

所有规则之间不会冲突，因为每个选择器只会命中对应位置的元素，完全满足你“不能反转规则、末项必须100%”的要求，而且纯CSS实现，不需要额外的JS或HTML结构修改。

内容的提问来源于stack exchange，提问作者CyberJ