html中写自增数字,CSS 小技巧：counter 实现有序列表编号自增

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

一、使用数字编号

极限编程网
博客园
CSDN

二、使用大写字母

极限编程网
博客园
CSDN

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

ol{

list-style: upper-alpha;

}

三、使用小写字母

极限编程网
博客园
CSDN

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

ol{

list-style: lower-alpha;

}

四、大写罗马数字

极限编程网
博客园
CSDN

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

ol{

list-style: upper-roman;

}

五、小写罗马数字

极限编程网
博客园
CSDN

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

ol{

list-style: lower-roman;

}

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

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

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

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

CSS3 counter

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;

}

极限编程网
博客园
CSDN

极限编程网
博客园
CSDN

html中写自增数字,CSS 小技巧：counter 实现有序列表编号自增相关推荐

利用random 的randint 方法写一个猜数字的小游戏
学习python第二天,编写的一款数字小游戏昨天学习完条件语句和while循环,老师留下的作业:利用random 的randint 方法写一个猜数字的小游戏. 第一次在CSDN上记录,小白一枚.希望 ...
css 自动换行_前端必备！20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中将一段文字置于容器的水平中点 ...
LaTeX 写学术论文的一些小技巧
此文用于分享一些用 LaTeX 写学术论文的一些小技巧,并会不断更新中 ... 笔者安装的是 CTeX 和 TeXStudio 软件,这两个软件配合很好使用.尤其是 TeXStudio 使用起来很方便 ...
10 个不错的 CSS 小技巧
本文为译文,采用意译. CSS 大约有两百个属性.很多属性都是相互关联的,理清楚每一个属性细节是不可能的.所以,本文分享一些有用的 CSS 小技巧,方便开发者和设计师参考. 1. 打字效果 Typin ...
css文字换行时对不齐,css小技巧 - 换行对齐
假如需要你实现换行对齐,你可能会想到ul标签和li标签自带这种功能确实在使用li标签自带的项目符号的时候可以直接使用,但是有时可能会有不一致时就需要我们动手写两行代码来实现一下,比如这种效果: 项 ...
11个教程中不常被提及的JavaScript小技巧
Java面试笔试面经.Java技术每天学习一点 Java面试关注不迷路作者:冷星来源:https://segmentfault.com/a/1190000018897633 这次我们主要来分享1 ...
Python中四个不常见的小技巧
1. 引言在编程界,每个人都希望自己可以写出世界上最好的代码,其实最好的代码往往需要具备最好的代码质量.勤能补拙,善于总结往往可以快速提升大家的编程技巧. 本文重点对日常中不常使用的四个Python ...
12个你可能不知道的CSS小技巧
本文整理出12个开发中你有可能没有用到过的CSS小技巧,一起来看看吧~ 1. 自定义光标(cursor) 首先来看一下CSS的内置光标样式.平时开发中用到的基本上就是default.pointer.n ...
Win10 UWP开发中的重复性静态UI绘制小技巧 1
Win10 UWP开发中的重复性静态UI绘制小技巧 1 原文:Win10 UWP开发中的重复性静态UI绘制小技巧 1 介绍在Windows 10 UWP界面实现的过程中,有时会遇到一些重复性的.静态 ...

html中写自增数字,CSS 小技巧：counter 实现有序列表编号自增

html中写自增数字,CSS 小技巧：counter 实现有序列表编号自增相关推荐

最新文章

热门文章