HTML 样式列表元素，其字体大小取决于元素

Posted 2023-03-14

【中文标题】HTML 样式列表元素，其字体大小取决于元素

【英文标题】：HTML style list elements with decreasing font-size depending on element

【发布时间】：2017-01-14 04:40:39

【问题描述】：

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

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

应该导致类似

1号

2号 3 号

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

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

【问题讨论】：

列表是否无限长？是否有停止减小字体大小的点？

li , li + li , li + li +li ，或nth-child 多次。

好吧，基本上我不会有超过 4 个元素，但希望看到一个尊重无限列表的解决方案

嗯，那么在无限列表的情况下，字体大小的限制在哪里？我想你不希望它减少到不可读的程度......

如果还不清楚：在 CSS 中没有办法无限地做到这一点。即使使用编程语言，您也需要构建逻辑以最终以 1px 或 1% 之类的速度结束下降。

【参考方案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 值（这将呈现为不可见），并且任何之后的值都会有一个负数（这将无效）。

【讨论】：

第四项是5px font-size，第五项是25px font-size，这样不好。

同意，第一个 li 规则应该是 5px（或任何最小的），因此所有后续项目都会获得最小的字体大小。

是的，但任何超过 5 个列表元素都会导致值为零或更低（可以说这更糟 - 至少从可访问性/可用性的角度来看）。这实际上是我在回答中试图指出的。

@JordanClark 你没抓住重点——我们并不是说要低于 5px——我们说的是 li 的基本选择器规则，所有 li 元素都将继承自该规则实际上应该是最低字体大小而不是最高字体大小，并使用li:nth-child(1) 设置最高。这样，如果稍后将更多列表元素添加到 html 中，它们的字体大小将是 5px 而不是 25px（这看起来很尴尬）。

@JordanClark，一个合理的后备方案是将您的最终选择器更改为li:nth-child(n + 5)，因为 OP 从未在您关注的场景中指定他到底想要什么。即使字体大小不能进一步减小，后续项目可能仍应保留最后最小的字体大小。

【参考方案2】：

您可以使用 css 中的第 n 个子项：

`<ul class='ultag'>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
</ul>
<style>
 .ultag li:nth-child(1)  font-size: 25px; 
 .ultag li:nth-child(2)  font-size: 20px; 
 .ultag li:nth-child(3)  font-size: 15px; 
 .ultag li:nth-child(4)  font-size: 10px; 
</style>
`

【参考方案3】：

此解决方案不需要 Javascript，您可以完全在 CSS 中完成。

CSS

li 
  font-size: 100%;


li:nth-child(1) 
  font-size: 90%;


li:nth-child(2) 
  font-size: 80%;


li:nth-child(3) 
  font-size: 70%;


li:nth-child(4) 
  font-size: 60%;

虽然这不是无限深，但您提到最大值为 4，所以这应该是一个很好的解决方案。

如果您需要无限深入，我建议使用 JS 解决方案，尽管需要的时间很少。

【讨论】：

代码只是一个例子，你可以根据需要添加任意数量的:nth-child元素。我更新了我的答案以确保准确性。

不好，先设置所有列表元素的最小字体大小（例如：li font-size: 50%;），而不是前4个。

【参考方案4】：

类可以用来改变大小，给每个 li 元素添加一个类，然后可以创建 CSS 来相应地改变大小。

<ul>
 <li class="one">Number 1</li>
 <li class="two">Number 2</li>
 <li class="three">Number 3</li>
</ul>

这是一个开始：https://jsfiddle.net/he5gs4z0/2/

相关帖子：Can you use if/else conditions in CSS?

【参考方案5】：

这里是一个使用 JQuery 的例子，见例子https://jsfiddle.net/kvb5hb6f/3/

这是将li 的字体大小设置为从 25 开始并确定为 -5，然后当大小达到 5 时它不会变小。

<ul id="numbers">
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
  <li>Number 7</li>
  <li>Number 8</li>
  <li>Number 9</li>
</ul>
<script>
  var listItems = $("#numbers li");
  var fontHeight = 25;
  listItems.each(function(idx, li) 
    var product = $(li);
    if (fontHeight >= 5) 
      $(product).css("fontSize", fontHeight + "px");
      fontHeight = fontHeight - 5;
     else 
      fontHeight = 5;
      $(product).css("fontSize", fontHeight + "px");
    
  );

</script>

【讨论】：

“有没有办法只用 CSS 来做到这一点？”这是使用 jquery 的方法，因为它很棒并且可以做所有事情。

@PeeHaa 来自 OP 的 cmets “好吧，基本上我不会有超过 4 个元素，但希望看到一个尊重无限列表的解决方案”继续所有好的投票:)

他做到了。在他的问题中。