CSS实现章节添加自增序号的方法


Posted in HTML / CSS onJune 23, 2021

开始

当我们想写一个类似掘金的文章或者自己的博客的时候,是否有想过该怎么实现给自己文章的章节添加章节号,给小标题增加标题号,或者给列表增加列序号,简单的静态文本我们或许可以手动输入或者使用html的有序列表 <ol>,但是有序列表自带样式,达到我们想要的效果可能还要费一番功夫,繁多的结构我们是否只能通过js来实现呢?

CSS计数器

css计数器通过几个css的属性值来实现,分别是

  • counter-reset - 创建或者重置计数器
  • counter-increment - 递增变量
  • content - 插入生成的内容
  • counter() 或 counters() 函数 - 将计数器的值添加到元素

所有主流浏览器都支持,大家可以放心使用

counter-reset

使用css计数器的第一步就是创建或者重置计数器,使用counter-reset属性,默认初始值为0,可以额外设置其他初始值

counter-reset: chapter; /* 重置计数器为 0 */
counter-reset: chapter 2; /* 重置计数器为 2 */

counter-increment

counter-increment属性用于将CSS Counters的值增加给定值。参数和counter-reset一致。第一个参数应和创建计数器counter-reset的第一个参数保持一致

h1{
  counter-increment: chapter;
}

countent

为了使用我们刚才创建的计数器,需要使用content,content是before或着after伪类中使用的属性,我们经常使用伪类来做一些修饰

h1::before{
  content: counter(chapter)'. ';
}

最终我们呈现的效果如下

<style>
body{
  counter-reset: chapter;
}
h1::before{
  counter-increment: chapter;
  content: counter(chapter)'. ';
}
</style>
<body>
  <h1>三国演义</h1>
  <h1>红楼梦</h1>
  <h1>水浒传</h1>
  <h1>西游记</h1>
</body>

CSS实现章节添加自增序号的方法

计数器嵌套

css 的计数器还可以在列表中使用,支持嵌套,子元素中会自动创建一个CSS计数器的实例。使用 counters() 函数,在不同级别的嵌套计数器之间可以插入字符串
首先将列表的默认类型设为none不显示,否则会影响效果的显示,嵌套的<li>需要使用相同的计数器名字,然后使用 counters 函数可以访问所有的计数器,并将父级与子级拼接,类似js的join函数。

<style>
  ol {
    counter-reset: section;
    list-style-type: none;
  }
  li:before {
    counter-increment: section; 
    content: counters(section, '.') ' '; 
  }
</style>
<ol>
  <li>西游记</li>
  <li>
    红楼梦
    <ol>
      <li>甄士隐梦幻识通灵 贾雨村风尘怀闺秀</li>
      <li>贾夫人仙逝扬州城 冷子兴演说荣国府</li>
    </ol>
  </li>
</ol>
<ol>
  <li>百年孤独</li>
  <li>老人与海</li>
</ol>

CSS实现章节添加自增序号的方法

最后

这里介绍了用counter-reset 和 counter-increment 操作,用content显示css计数器的方法,虽然不常用,但是确出人意料的好用。希望能够对你有所帮助,谢谢

到此这篇关于CSS实现章节添加自增序号的方法的文章就介绍到这了,更多相关CSS添加自增序号内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3的transition属性详解
Dec 15 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
CSS中Single Div 绘图技巧的实现
CSS几步实现赛博朋克2077风格视觉效果
教你做个可爱的css滑动导航条
You might like
PHP中的use关键字概述
2014/07/23 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
vue子父组件通信的实现代码
2017/07/09 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
基于python实现简单日历
2018/07/28 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
趣味活动策划方案
2014/02/08 职场文书
一年级学生评语大全
2014/04/21 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
校长创先争优承诺书
2014/08/30 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript