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

Answer 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>
`

Answer 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 解决方案，尽管需要的时间很少。

Answer 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?

Answer 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>