深入理解CSS计数器
前面的话
我们对计数器已经不陌生了,有序列表中的列表项标志就是计数器。
创建计数器
创建计数器的基础包括两个方面,一是能重置计数器的起点,二是能将其递增一定的量。
counter-reset
counter-reset:none;(默认) counter-reset:<identifier><integer> //<identifier>是计数器标识符,是创作人员自己起的一个名字 //<integer>是重置的数字
counter-reset: c1 4;//表示将c1的计数器重置为4 counter-reset: c1 4 c2 0 c3 -5;//表示将c1重置为4,将c2重置为0,将c3重置为-5 couter-reset: c1;//将c1重置为0
[注意]如果不设置<integer>,则默认重置为0
counter-increment
counter-increment:none;(默认) counter-increment:<identifier><integer> //<identifier>是计数器标识符,是创作人员自己起的一个名字 //<integer>是递增的数字
counter-increment: c1 4;//表示将c1计数器的递增设为4 counter-reset: c1 4 c2 0 c3 -5;//表示将c1递增设为4,将c2递增设为0,将c3递增设为-5 couter-increment: c1;//将c1计数器的递增设为1
[注意]如果不设置<integer>,则默认递增为1
使用计数器
具体使用计数器需要结合使用content属性和counter()函数
counter()函数
counter()函数接受两个参数,而且两参数之间用逗号(,)来分隔,第一个参数是计数器标识符,第二个参数设置计数器风格(可省略),与列表中list-style-type值相同。同样的,可以使用多个counter()函数。
content: counter(c1,upper-roman);//表示使用大写罗马字母格式的计数器c1
【关于计数器风格详见下面演示框】
<演示框>点击下列相应属性值可进行演示
DEMO
简单计数器演示
<演示框>点击下列相应属性值可进行演示
层级目录演示
<div id="oShow"><h2>第一章</h2><h3>第一部分</h3><p>第一节</p><p>第二节</p><h3>第二部分</h3><p>第一节</p> <h2>第二章</h2><h3>第一部分</h3><p>第一节</p><p>第二节</p><h3>第二部分</h3><p>第一节</p> <h2>第三章</h2><h3>第一部分</h3><p>第一节</p><p>第二节</p><h3>第二部分</h3><p>第一节</p> </div>
body,h2,h3,p{margin: 0; } #oShow{counter-reset: c2; } #oShow h2{counter-reset: c3 cp;counter-increment: c2; } #oShow h3{counter-increment: c3; counter-reset: cp;text-indent: 2em; } #oShow p{counter-increment: cp; text-indent: 4em; } #oShow h2:before{content: counter(c2); } #oShow h3:before{content: counter(c2) '.' counter(c3); } #oShow p:before{content: counter(c2) '.' counter(c3) '.' counter(cp); }
<演示框>点击下列相应属性值可进行演示
转载于:https://www.cnblogs.com/xiaohuochai/p/5018519.html
深入理解CSS计数器相关推荐
- CSS计数器(序列数字字符自动递增)详解———张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可 ...
- 理解 CSS 布局和块级格式上下文
本文的目的是介绍一些概念来帮你增强 CSS 码力.如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context.你可能没听过这个术语但只要你曾经使用 过CSS 布局你 ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
- html5计数器,CSS 计数器(counter)
带计数器的自动编号 CSS计数器就像"变量".变量值可以通过CSS规则递增(它将跟踪它们被使用的次数).要使用CSS计数器,我们将使用以下属性: counter-reset - 创 ...
- 深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型 本文是学习中传思客在慕课网开的课程<前端跳槽面试必备技巧>的学习笔记.课程地址:https://coding.imooc.com/class/evaluation/1 ...
- 转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 谁动了我的选择器?深入理解CSS选择器优先级
深入理解CSS选择器优先级
- 一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文
CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...
- 进一步理解CSS浮动与清除浮动
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷 为什么设置clear:both能清除浮动,并撑开父元素. 起因 CSS的浮动,算是我在写网页时用的最多的属性之一.但要说我对浮动的了解程度 ...
最新文章
- 每个Java应用容器都要包含tomcat_部署一个不依赖tomcat容器的应用
- LNSYOJ201小胖的奇偶【并查集+离散化】【做题报告】
- leetcode1007. 行相等的最少多米诺旋转(贪心)
- 没有varselect这个函数_C++的虚函数,虚析构函数,纯虚函数
- bmp文件头_图像算法原理与实践——图像文件存储
- c语言四大淡水湖大小设计任务,[讨论]四大淡水湖的大小排序问题(逻辑题)
- [图解教程]Eclipse不可不知的用法之一:自动生成Getter、Setter和构造方法
- 最简单的零成本创业模式
- POJ 2480 Longge#39;s problem 积性函数
- OpenCV-Python实战(3)——OpenCV中绘制图形与文本
- 推荐!手把手教你使用Git(转)
- C#:遍历JObject
- CentOS 7之Systemd详解之服务单元设置system.service
- jspx框架使用总结-页面开发
- 一句话说明sync, fsync, fdatasync的区别
- linux hotplug 机制,佐须之男的博客- 跟着佐大学Lede/OpenWrt开发入门培训班讲义-18 OpenWrt hotplug 机制分析...
- 电脑服务器不小心删除文件怎么办,电脑不小心删除的文件可以恢复吗?
- 相机视场角和焦距_镜头焦距和视场角介绍!
- C语言中的while(y--)什么意思,while(x)什么意思
- java多线程厨师做饼,Java多线程之厨师与食客问题