CSS 小技巧：counter 实现有序列表编号自增

最新推荐文章于 2022-07-12 10:28:17 发布
最新推荐文章于 2022-07-12 10:28:17 发布
阅读量941 收藏 1
点赞数
原文链接：https://www.limitcode.com/detail/5e622cc64de9b4065c2c913a.html
版权

做前端开发的童鞋都知道 ol 是有序列表 ,全称是ordered list。其使用有如下几种方式：

一、使用数字编号

1

2

3

4

5

<ol>

    <li>极限编程网</li>

    <li>博客园</li>

    <li>CSDN</li>

</ol>

二、使用大写字母

1

2

3

4

5

6

7

8

9

10

<ol  type="A">

    <li>极限编程网</li>

    <li>博客园</li>

    <li>CSDN</li>

</ol>

 

/* 也可以通过 css 控制*/

ol{

    list-style: upper-alpha;

}

三、使用小写字母

1

2

3

4

5

6

7

8

9

<ol  type="a">

    <li>极限编程网</li>

    <li>博客园</li>

    <li>CSDN</li>

</ol>

/* 也可以通过 css 控制*/

ol{

    list-style: lower-alpha;

}

四、大写罗马数字

1

2

3

4

5

6

7

8

9

<ol  type="I">

    <li>极限编程网</li>

    <li>博客园</li>

    <li>CSDN</li>

</ol>

/* 也可以通过 css 控制*/

ol{

    list-style: upper-roman;

}

五、小写罗马数字

1

2

3

4

5

6

7

8

9

<ol  type="i">

    <li>极限编程网</li>

    <li>博客园</li>

    <li>CSDN</li>

</ol>

/* 也可以通过 css 控制*/

ol{

    list-style: lower-roman;

}

假如现在有需求，需要我们对 ol 序号做美化，实现如下效果呢？

这里我们使用css 的 counter 属性搭配 before 伪元素来实现，不过 counter 属性也需要配合其他css属性使用，接着说说这两个属性的用法。

counter-reset：主要功能是用来标识计数器的作用域的。它只能作用于选择器上，它的值包括两部分：第一部分为计数器的名字；第二部分为计数器的起始值（默认为0）

counter-increment：表明计数器实际用到的范围 。他的值也包括两部分：第一个为计数器的名字，即counter-reset设置好的名字，第二个值标识递增的值（默认为1）

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3 counter </title>

    <style type="text/css">

 ol{

            list-style: none;

 counter-reset: blogs 0; /* 从 0 开始 */

 }

        ol li{

            position: relative;

 font-size: 18px;

 height: 32px;

 line-height: 32px;

 background-color: azure;

 margin: 4px 0px;

 padding: 0px 4px;

 }

        .counter1 li:before{

            position: absolute;

 top: 0px;

 bottom: 0;

 left: -32px;

 counter-increment: blogs 1;/* 每次递增 1 */

 content: counter(blogs);

 width: 32px;

 text-align: center;

 background-color: #ccc;

 }

        .counter2 li:before{

            position: absolute;

 top: 0px;

 bottom: 0;

 left: -32px;

 counter-increment: blogs 2;/* 每次递增 2 */

 content: counter(blogs)"、";

 width: 32px;

 text-align: center;

 background-color: #ccc;

 }

    </style>

</head>

<body>

    <ol class="counter1">

        <li>极限编程网</li>

        <li>博客园</li>

        <li>CSDN</li>

    </ol>

    <p></p>

    <ol class="counter2">

        <li>极限编程网</li>

        <li>博客园</li>

        <li>CSDN</li>

    </ol>

</body>

</html>

小阿炳
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS3内置计数器功能，实现自动编号（counter）
大道至简
11-03 231
使用CSS3内置计数器功能，实现自动编号； 核心代码 body { counter-reset: section; } h1 { counter-reset: subsection; } h1:before { content: "Section " counter(section) ". "; counter-increment: section; } h2:before { counter-increment: subsection; content: counter(se
在 LaTeX 中创建含有中文的有序列表编号
Xovee
03-07 3197
使用最最最简单的方法创建带有中文的有序列表编号。
CSS counter计数器(content目录序号自动递增)详解
前端小白成长记
04-23 3248
CSS Counters用到的属性前面也提到过，使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成，他需要几个属性一起使用才会有效果。使用的到属性包括： **counter-reset**：此值是必需的。必须用于选择器，主要用来标识该作用域，其值可以自定义。 **counter-increment**：用来标识计数器与实际相关联的范围。 **content**...
day-04 CSS听课笔记
weixin_45422321的博客
04-22 403
1.快速生成HTML结构语法 1.生成标签 直接输入标签名 按tab键即可 比如 div 然后按tab键 就可以生成<~div> </~div> 2.如果想要生成多个相同标签 加上就可以了 比如 div3 就可以快速生成3个div 3.如果有父子级关系的标签，可以用> 比如ul >li 就可以了 <ul> <li></li> </ul> 4.如果有兄弟关系的标签，用+就可以了 比如 div+
HTML在有序列表方中填充序号,HTML中的有序列表,使用奇数编号
weixin_39676242的博客
06-03 322
我认为这不能用正常的有序列表实现,因为the only attributes available seem to be the following(甚至包括HTML5)：> type(表示编号类型)> start(表示起始值)> reverse(表示列表是否颠倒)但它可以使用CSS计数器实现,如下面的代码段所示. CSS计数器不是新事物和has very good browser...
表格常用标签及属性(表格标签基本使用,表格结构和常用列表,自定义列表和表单,表单输入,表单输入)
qq_45585640的博客
12-16 1万+
1. 表格常用标签及属性 1.1 表格标签基本使用 表格的主要作用是什么？ 以行、列的方式（表格）整齐地展示数据，例如：股票价格 用表格布局页面 表格的基本语法： <table> <tr> <td>单元格内容</td> ... //重复 td → 单元格 </tr> ... //重复 tr → 行 </table> 常用的表格标签有几个？分别代表什么含义？ 三个基本的表格标签： 序号 标签名 说
CSS高级技巧:滑动门技术
01-19
上一篇CSS教程 文章：CSS高级技巧:图片替换 滑动门(Sliding Doors) 还是决定把滑动门单独提作一种单独的技术. 它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, ...
CSS高级技巧:圆角矩形
01-21
所谓的CSS高级技巧…其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍. CSS2 还没有办法创造出曲线边框, 明显的, 仅仅方框是没办法...
CSS高级技巧:网页布局
12-09
上一篇CSS教程 文章：CSS高级技巧:文字环绕图片 布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用...
css-adv:htmlcss 布局实现技巧练习
06-30
）简单的tab切换，要压住下边线哦左小图，右自适应宽度的布局，小三角箭头的应用箭头以及垂直排列tag标签，注意文字垂直居中，标签要水平对齐表格布局小应用，如何变得更精美复杂的下单列表筛选排序功能筛选价格功能...
利用css计数器属性(counter)实现列表序号自动增加.zip
最新发布
06-26
使用场景：本例通过css的计数器属性实现了有序列表的序号自动增加效果。案例设计美观，非常实用。可用于各种排行的展示需求。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、不使用JQ框架。 ...
CSS高度自增长
netuser1937的博客
02-06 1027
CSS高度自增长
有序列表、无序列表、嵌套列表
辐_射的博客
01-14 2582
<!DOCTYPE HTML PUBLIC "-//DTD//W3C HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>H...
html列表--有序列表、无序列表、定义列表
热门推荐
YMYYZ的博客
07-12 1万+
html列表--无序列表、有序列表、定义列表
Word基础（六）给文本添加有序列表-项目编号
浮生流年的博客
01-05 3410
在Word中，如何给文本添加如下图所示的项目编号（有序列表）呢？ 上图中的文本被添加了4级列表，仅做参考，用来展示项目编号的使用效果。 方法：解决给文本添加项目编号的问题 选中文本 点击开始选项卡，找到段落分类左上角的编号（在前一张讲到的项目符号右侧）并点击其下拉三角 选择想要的项目编号即可。 方法：解决给文本添加多级列表的问题 在文本已添加了一级列表的基础上 选中想要成为二级列表的文本 点击开...
有序列表的序号样式
weixin_30492601的博客
12-01 2735
代码： <ol> <li>张店</li> <li>淄川</li> <li>周村</li> </ol> 页面效果 list-style属性，可以将列表前面的序号去掉。 代码 <ol style="list-style:none"> <li>张店&...
Counter（）函数进行排序后如何得到有序的键
hb_learing的博客
04-06 1568
当得到Counter()函数得到的排序结果后，如何得到有序的键呢？你在这里可以得到答案！ 下面以深度学习图像分类问题引入Counter()函数，假设现在有一个文件，记录了最后迭代的五次、在测试集上预测错误的图片的信息，现在要统计每一张预测错误的图片在这五次迭代中总共预测错误的次数、以及预测成错误的类别对应的次数。例如：在五次迭代中，rgb-028-057.JPG这张图片五次都被预测错了，其中预测成第55类为4次，预测为33类为1次，**要求预测错误的图片按照预测失败的次数从高到低的顺序排序**。则格式如下：
html怎么自动增加序号,css如何使用计数器给元素自动编号？
weixin_34304274的博客
05-31 1985
在之前的文章【css计数器(counter)是什么】中我们简单介绍了css计数器的相关属性，以及通过代码实例来简单了解了一下css计数器的使用，本篇文章我们就来具体看看css计数器是如何设置和使用的，如何实现元素自动编号的。【相关视频教程推荐：CSS3教程】一、设置和使用css计数器，实现简单的元素编号为了创建和使用CSS计数器，遵循以下步骤：1、设置计数器的名称并将其重置为我们选择的初始值。这是...
第二天
weixin_51185397的博客
10-13 143
1.表格常用标签及属性 1.表格的基本标签 表格的作用：以行、列的方式（表格）整齐地展示数据。 表格的基本语法： <table> <tr> <td>单元格内容</td> ... 重复 td → 单元格 </tr> ... 重复 tr → 行 </table> 表格的基本标签： table：表格标签，用于包含多个 tr tr：定义表格中的行，用于包含多个 td td：定义表格中的单元格

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值