CSS 小数前导零不适用于大数字-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

CSS 小数前导零不适用于大数字

P粉018548441 2023-11-07 10:35:53

[CSS3讨论组]

1181

最近我遇到了一个问题，我创建了一个包含一百多个列表项的有序列表。我设置了 list-style:decimal-leading-zero;

ol{
  list-style: decimal-leading-zero;
}

Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item

...

Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item
Some item

问题：只有前九个列表项有前导零。

预期：前九个列表项中有两个前导零，第 10 到第 99 个列表项有一个前导零。

P粉018548441

全部回复(1)

P粉5761849332023-11-08 00:40:33 1楼

没有用于三位小数的list-style。

但是，您可以使用伪选择器和计数器 a> 在这里实现你想要的。

参考代码：

ol {
  counter-reset: items;
}

li {
  display: block;
  counter-increment: items;
}

li:before {
  content: "00" counter(items)". ";
}

li:nth-child(n+10):before {
  content: "0" counter(items)". ";
}

li:nth-child(n+100):before {
  content: counter(items)". ";
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>
  <li>Item 20</li>
  <li>Item 21</li>
  <li>Item 22</li>
  <li>Item 23</li>
  <li>Item 24</li>
  <li>Item 25</li>
  <li>Item 26</li>
  <li>Item 27</li>
  <li>Item 28</li>
  <li>Item 29</li>
  <li>Item 30</li>
  <li>Item 31</li>
  <li>Item 32</li>
  <li>Item 33</li>
  <li>Item 34</li>
  <li>Item 35</li>
  <li>Item 36</li>
  <li>Item 37</li>
  <li>Item 38</li>
  <li>Item 39</li>
  <li>Item 40</li>
  <li>Item 41</li>
  <li>Item 42</li>
  <li>Item 43</li>
  <li>Item 44</li>
  <li>Item 45</li>
  <li>Item 46</li>
  <li>Item 47</li>
  <li>Item 48</li>
  <li>Item 49</li>
  <li>Item 50</li>
  <li>Item 51</li>
  <li>Item 52</li>
  <li>Item 53</li>
  <li>Item 54</li>
  <li>Item 55</li>
  <li>Item 56</li>
  <li>Item 57</li>
  <li>Item 58</li>
  <li>Item 59</li>
  <li>Item 60</li>
  <li>Item 61</li>
  <li>Item 62</li>
  <li>Item 63</li>
  <li>Item 64</li>
  <li>Item 65</li>
  <li>Item 66</li>
  <li>Item 67</li>
  <li>Item 68</li>
  <li>Item 69</li>
  <li>Item 70</li>
  <li>Item 71</li>
  <li>Item 72</li>
  <li>Item 73</li>
  <li>Item 74</li>
  <li>Item 75</li>
  <li>Item 76</li>
  <li>Item 77</li>
  <li>Item 78</li>
  <li>Item 79</li>
  <li>Item 80</li>
  <li>Item 81</li>
  <li>Item 82</li>
  <li>Item 83</li>
  <li>Item 84</li>
  <li>Item 85</li>
  <li>Item 86</li>
  <li>Item 87</li>
  <li>Item 88</li>
  <li>Item 89</li>
  <li>Item 90</li>
  <li>Item 91</li>
  <li>Item 92</li>
  <li>Item 93</li>
  <li>Item 94</li>
  <li>Item 95</li>
  <li>Item 96</li>
  <li>Item 97</li>
  <li>Item 98</li>
  <li>Item 99</li>
  <li>Item 100</li>
  <li>Item 101</li>
  <li>Item 102</li>
</ol>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>