html自动编号小圆点怎么实现,css如何实现自动编号?计数器的使用
本篇文章给大家带来的内容是介绍css如何实现自动编号?计数器的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
一、自动编号
在CSS 2.1中的自动编号由两个属性控制,它们分别为:“counter-increment”和“counter-reset”。由这些属性定义的计数器(counter)与“content”属性的counter()和counters()函数一起使用。
'counter-increment'
语法:counter-increment:[ ? ]+ | none | inherit
说明:
初始: 没有
适用于: 所有元素
继承: 没有
百分比: N / A
媒体: 所有
计算值: 作为指定
counter-increment'属性接受的计数器(标识符)的一个或多个名称,每一个名称可选地跟随一个整数。整数表示每次出现元素时计数器的递增程度,默认增量为1,允许零和负整数。
'counter-reset'
语法:counter-reset:[ ? ]+ | none | inherit
说明:
初始: 没有
适用于: 所有元素
继承: 没有
百分比: N / A
媒体: 所有
计算值: 作为指定
counter-reset属性包含计数器的一个或多个名称,每一个名称可选地任选地跟随一个整数的列表。整数给出每次出现元素时计数器设置的值。默认值为0。
注:关键字'none','inherit'和'initial'不得用作计数器名称;值'none'本身意味着没有重置计数器,'inherit'本身具有其通常的含义(继承),“initial”保留供将来使用。
例:显示了使用“第1章”,“1.1”,“1.2”等对章节进行编号的方法。
html代码:
大标题
小标题1
小标题2
css代码:body {
counter-reset: chapter; /* 创建章节计数器范围 */
}
h1:before {
content: "第" counter(chapter) "章、";
counter-increment: chapter; /* 在章节中添加1 */
}
h1 {
counter-reset: section; /* 将部分设置为0 */
}
h2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
效果图:
注:
1、如果元素递增(increment)/重置(resets)计数器并且还使用计数器(在其:before或:after伪元素 的'content'属性中),则需在递增/重置后使用计数器。
2、如果元素既重置又增加计数器,则首先重置计数器然后递增。
3、如果在'counter-reset'和'counter-increment' 属性的值中多次指定相同的计数器,则按指定 的顺序处理计数器的每个复位/增量。
例:
1、将'section'计数器重置为0:h1 { counter-reset: section 2 section }
2、将“chapter”计数器增加3:h1 { counter-increment: chapter chapter 2 }
3、在“counter-reset”属性遵循层叠规则。因此,由于级联,以下样式表:h1 {counter-reset:section -1}
h1 {counter-reset:imagenum 99}
4、只会重置'imagenum'。要重置两个计数器,必须同时指定它们:h1 {counter-reset:section -1 imagenum 99}
二、计数器的样式
默认情况下,计数器使用十进制数字格式化,但“list-style-type”属性的所有可用样式也可用于计数器。符号是:counter(name)
默认样式,或设置其他样式:counter(name,< 'list-style-type' >)
计数器允许使用list-style-type属性的所有样式,包括'disc','circle','square'和'none'。
例:h1:before {
content: counter(chno, upper-latin) ". "
}
h2:before {
content: counter(section, upper-roman) " - "
}
blockquote::after {
content: " [" counter(bq, lower-greek) "]"
}
div.note:before {
content: counter(notecntr, disc) " "
}
p:before {
content: counter(p, none)
}
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
html自动编号小圆点怎么实现,css如何实现自动编号?计数器的使用相关推荐
- 怎么禁用计算机上的自动播放,关闭自动播放,小编教你Win7怎么关闭自动播放功能...
很多用户在使用电脑过程中都发现了这样的情况,将可移动设备连接电脑时,系统会弹出自动播放提示框,hello Bitch!!挺贱贱的感觉,那么怎么关闭自动播放功能呢?下面,小编给大家带来了Win7关闭自动 ...
- CSS中如何去掉li标签前面的小圆点
CSS去掉li标签前面的小圆点 ul li 代码示例 <ul><li>西瓜</li><li>冬瓜</li><li>南瓜</ ...
- 去掉无序列表前默认加上的小圆点——实战练习需到的问题解决办法mark
需求如题,去掉无序列表前默认加上的小圆点 1.在CSS中对 li 标签设置 list-style-type:none; .contact-list li {list-style-type: none; ...
- 纯CSS实现目录自动编号
纵观一篇word文档,一般都是通过章节来组织整个正文的内容,而构成正文的基本元素包括段落.列表.表格.超链接及嵌入式对象(如图片.视频.音频.文档)等. 通过这些基本元素的排列.组合.嵌套,便构成了纷 ...
- JS无缝轮播图(支持点击左右切换,小圆点切换,定时器自动播放)
HTML代码 <div class="box"><!-- ul就相当于我装图片的盒子 --><ul class="box_ul"& ...
- 苹果小圆点怎么关闭_苹果手机连按2下屏幕,就能自动截图,不知道的来学一学...
苹果手机连按2下屏幕,就能自动截图,不知道的来学一学 很多苹果用户都羡慕安卓手机,可以花式截屏,不仅支持局部截屏还可以长截屏. 其实苹果手机的截屏方式也可以很炫酷,今天就来教大家一招,连按2下手机屏幕 ...
- CSS -- CSS字体样式、文本样式、去掉列表的小圆点、背景、背景渐变
1. CSS字体样式.文本样式.去掉列表的小圆点.背景.背景渐变 1.1字体样式 字体样式 font-family 字体(可以添加2种字体,一种针对中文,一种针对英文) font-size 字体大小( ...
- HTML+CSS修改li前小圆点的样式or颜色
HTML+CSS修改li前小圆点的样式or颜色 修改样式 有参考样式的图片情况: 将原有的小圆点删除后再添加 修改颜色 代码 修改样式 有两种方法比较方便的方法 有参考样式的图片情况: 可以使用图像处 ...
- 怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
最新文章
- AXIS2整合spring需要的jar,以及大部分缺少jar所报的异常
- android studio如何生成混淆代码的jar
- webservice 参数太大_手把手系列:常用数据交换方案Web Service接口处理法
- 《与mysql零距离接触》视屏学习笔记
- mysql8 距离计算_MySQL8 的 Hash join 算法
- VMware SDS 之一:什么是VSAN??
- linux 查看 java 进程内存占用情况
- 2008评估过期 server sql_SQLServer2008R2数据库评估版已经过期解决办法.doc
- 路由器的架构集指令集
- ISO18000-6B和ISO18000-6C(EPC C1 G2)标准的区别
- idea 导入 android项目以及自带AVD模拟器的使用
- 惩罚函数法例题matlab,外点惩罚函数法例题
- Jvavscript- 跟着李南江学编程
- 用react-custom-scrollbars插件美化 Ant Design Table 滚动条
- 虚拟机查看HWADDR(即MAC)地址
- javaEE 后台框架 SpringMVC Mybatis Shiro druid
- 【其它笔记】驾考科目四笔记
- O2O模式发展迅速的原因 o2o模式成功的原因是什么?
- 湖北武汉安全员C证报考条件考试流程一览 秋禾火
- 1核2g1m服务器能支持多少人在线访问?
热门文章
- 表情包:有本事来爬我啊,俺有上千条 python:来啦~
- 解决Android Studio 无法检查更新问题
- 熟悉python中的tkinter图形包--(写一个参数计算器)
- 【毕业设计】银行营销数据分析系统 - 机器学习
- 阿里arthas(阿尔萨斯)的linux安装和使用
- Java中基本数据类型的位数及存储最值
- 安卓神器MT管理器软件V2.9.8和v2.5.0版本5438
- 熊大UWB系列教程二:KEIL软件环境搭建以及程序下载
- 欲穷千里目, 更上一层楼
- 三维视频融合.[点卯]增强虚拟全景平台.专业版 2020-10-22