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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
CSS中Single Div 绘图技巧的实现
CSS几步实现赛博朋克2077风格视觉效果
教你做个可爱的css滑动导航条
You might like
PHP开发框架总结收藏
2008/04/24 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
详解Python中的日志模块logging
2015/06/19 Python
python删除特定文件的方法
2015/07/30 Python
python select.select模块通信全过程解析
2017/09/20 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python 线程池用法简单示例
2019/10/02 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
学习雷锋精神心得体会范文
2014/03/12 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA