请选择 进入手机版 | 继续访问电脑版

弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 2063|回复: 0

【CSS】实现计数器

[复制链接]
发表于 2019-9-29 10:08:10 | 显示全部楼层 |阅读模式
摘自:https://blog.csdn.net/u012989850/article/details/53326171

无序列表
无序列表的每个列表项都用同样的方式标记。
CSS 有三种标记样式:

示例:

li.open {list-style: circle;}
li.closed {list-style: disc;}
li.square{list-style: square;}
<ul>
  <li class="open">Lorem ipsum</li>
  <li class="closed">Dolor sit</li>
  <li class="closed">Amet consectetuer</li>
  <li class="open">Magna aliquam</li>
  <li class="square">Autem veleum</li>
</ul>

有序列表
在有序列表中,每个列表项都被标记了不同的序号。
用list-style属性指定标记样式:


示例:

ol.info {list-style: upper-latin;}

<ol class="info">
    <li>ssss</li>
    <li>ssss</li>
    <li>ssss</li>
    <li>ssss</li>
    <li>ssss</li>
</ol>

结果:
1: ssss
2: ssss
3: ssss
4: ssss
5: ssss

计数器
你可以用计数器来计数任何元素,不仅是列表元素。比如,在某些文档中你可能想计数标题和段落。

要想计数,你必须定义一个计数器。

在计数开始前的某个元素上,设置 counter-reset属性以重置计数器。被计数元素的父节点是一个不错的选择。当然,任何出现在被计数元素前面的元素都可以。

设置每个需要计数的元素的counter-increment 属性为你的计数器名。

通过为选择器增加 :before 或 :after 并设置 content 属性来显示计数器。 (如上一节所示, 内容).

在content属性的值中设置 counter(),在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 有序列表 中相同。

正常情况下,显示计数器的元素也会递增计数器。

示例:

h3.numbered {counter-reset: mynum;}

p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;
}

<h3 class="numbered">Numbered paragraphs</h3>
<p class="numbered">Lorem ipsum</p>
<p class="numbered">Dolor sit</p>
<p class="numbered">Amet consectetuer</p>
<p class="numbered">Magna aliquam</p>
<p class="numbered">Autem veleum</p>

结果:
Numbered paragraphs

A: Lorem ipsum

B: Dolor sit

C: Amet consectetuer

D: Magna aliquam

E: Autem veleum
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-3-29 01:05 , Processed in 0.086769 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表