我想随着列表中数字的增加而减小每个元素的字体大小:
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
</ul>
结果应该是这样的
- 1 号
- 2 号
- 3 号
第一个元素的字体大小为 25px,第二个为 20px,第三个为 15px,依此类推。
有没有办法只用 CSS 来做到这一点?
最佳答案
您可以通过将以下 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
值为零(这将呈现为不可见),之后的任何元素它的值将是负数(这将是无效的)。
关于HTML 样式列表元素根据元素减小字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39353810/