Question

我有一个特定的<p>样式类（例如p.wp），我需要它从1 - n 在一系列HTML页面中递增。< / p>

诀窍是完整的数字需要包含4位数字：0001到0117，具体而言。

#start_wp {counter-reset: WP 0;}

p.wp{}

p.wp:before{
counter-increment: WP 1;
content: "WP 000" counter(WP, decimal)  ':';}

<body id="start_wp">
<p class="wp">This is a work package</p>
<p class="wp">This is a work package</p>
</body>

我可以使用before:轻松通过0001-0009的自动编号设置一个数字。但后来我想我必须为00nn和0nnn创建另外两个类。但必须通过JavaScript或jQuery进行自动编号。

我的挑战是：

如果我希望编号在所有页面上继续，我在哪里放counter-reset。
我可以通过ID设置吗？
- 我会将jQuery或JS添加到受计数器影响的每个页面吗？

虽然我已经相对理解了CSS的东西 - 但JS和jQuery对我来说是一个谜。我喜欢一些指导。

更新

我已经清除了其他代码并提出了这个问题：

   function LeadingZeros (){
  var num = 4;
  if num = (num < 10)
      result = ("000" + num);

  if num = (num < 100)
      result = ("00" + num);

  if num = (num < 1000)
      result = ("0" + num);
}

但我不知道

如果这是在正确的轨道上
如果它靠近（或者甚至朝着正确的方向移动），我会在此之后做什么。

思想？

Answer 1

您可以通过设置counter-style - counter(counter, <counter-style>)来使用CSS执行前导零位。来自CSS Tricks：

......数字不一定是小数。它们可以是list-style-type可以是......
的任何东西

在这种情况下，我认为你要找的是content: counter(my-counter, decimal-leading-zero)。并查看该文章的其余部分：它应该让您从正确的方向开始。

在CSS计数器样式类中添加前导零

1 个答案: