CSS 计数器可以创建带小数点的编号列表吗？

Susan Sarandon

发布： 2024-12-19 16:31:09

原创

126 人浏览过

Can CSS Counters Create Numbered Lists with Decimal Points?

创建带小数点的编号列表

CSS可以用来生成带小数点的编号列表，例如1.1、1.2和1.3 ，而不仅仅是 1、2 和 3？应用 list-style-type:decimal 只会产生后一个序列。

解决方案：利用计数器

为了达到所需的结果，可以使用计数器：

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

登录后复制

此 CSS 样式表为每个嵌套列表项分配一个带小数点的数字。例如，“1”、“1.1”、“1.1.1”等。

示例：

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

登录后复制

以上是CSS 计数器可以创建带小数点的编号列表吗？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

上一篇：如何使用 CSS3 创建平滑淡入淡出的闪烁文本？下一篇：如何修复因不同高度的浮动元素而损坏的布局？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章