Question

我想减少列表中数字增加的每个元素的字体大小：

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

应该导致类似

的内容

数字1
Number 2
3号

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

有没有办法只使用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

您不需要为此解决方案使用Javascript，您可以完全使用CSS。

<强> CSS

NUTS_shape = readOGR(dsn = (dsn = "~/NUTS_2013_20M_SH/data", layer = "NUTS_RG_20M_2013")

虽然这并没有深入，但你提到最大值是4，所以这应该是一个很好的解决方案。

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

Answer 3

以下是使用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>

Answer 4

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

let fullName = card.get('fn').valueOf();

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

相关文章：Can you use if/else conditions in CSS?

Answer 5

您可以使用css中的nth-child：

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

HTML样式列表元素，字体大小减少，具体取决于元素

5 个答案: