HTML 样式列表元素根据元素减小字体大小

Question

我想随着列表中数字的增加而减小每个元素的字体大小:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
</ul>

结果应该是这样的

• 1 号
• 2 号
• 3 号

第一个元素的字体大小为 25px，第二个为 20px，第三个为 15px，依此类推。

有没有办法只用 CSS 来做到这一点？

Answer 1

您可以通过将以下 CSS 添加到您的样式表来实现此效果:

li:nth-child(1) {
    font-size: 25px;
}

li:nth-child(2) {
    font-size: 20px;
}

li:nth-child(3) {
    font-size: 15px;
}

li:nth-child(4) {
    font-size: 10px;
}

li:nth-child(4) {
    font-size: 5px;
}

据我所知，在纯 CSS 中没有自动执行此操作的方法。您需要使用 JavaScript(或 jQuery 等 JavaScript 库)。

但是，如上面的代码示例所示，第五个 LI 元素的 font-size 值为零(这将呈现为不可见)，之后的任何元素它的值将是负数(这将是无效的)。