css3的counter的用法

很早之前,计数器仅存在于ul,ol等元素中,如何想给其他元素增加计数,就只能通过list-style-image,或者background-image来实现。不过现在css3增加了counter属性,可以实现任何元素的计数作用。不过这个counter属性还需要配合其他css属性一起才能有效果。

首先, counter-reset 主要功能是用来标识计数器的作用域的。它只能作用于选择器上,它的值包括两部分:第一部分为计数器的名字;第二部分为计数器的起始值(默认为0),counter-reset还可以同时声明多个计数器比如:

 counter-reset: count 0  /*标识计数器count从1开始*/

 counter-reset: count2 2 /*标识计数器count2 从3开始*/

 counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器,count1,count2,count3*/

  

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

counter-increment: count 1 /*表明每次递增 1*/

counter-increment:count 2 /*表明每次递增 2*/

  

最后一个,content和counter搭配使用,content主要是跟 :after, :before,::after,::before来搭配用的,counter主要是给元素插入计数器的值。

整体例子如下:

<dl>
        <dt>example</dt>
        <dd>example</dd>
        <dd>example</dd>
        <dd>example</dd>
        <dt>example2</dt>
        <dd>example2</dd>
        <dd>example2</dd>
        <dd>example2</dd>
        <dd>example2</dd>
</dl>

  

dl { counter-reset:test1 0;}
dt { counter-increment: test1; counter-reset: test2 0;}
dt:before{ content:counter(test1)"、";}
dd{ counter-increment:test2;}
dd:before{
   content:counter(test1)"-"counter(test2)"、";
 }

  效果图如下:

原文地址:https://www.cnblogs.com/jiajia123/p/9053587.html

时间: 2024-10-09 19:58:28

css3的counter的用法的相关文章

初识 css3中counter属性

最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器兼容性可以看[这里] 2.counter的作用 实际上是代替了javascript作为一种计数器工具,在css中使用.元素出现了几次就默认增加多少对应值.增加值大小还可以由自己设置. 可以想象当我们设置好一次规矩之后,以后无论添加多少标签,计数工具自动帮我们算计数,不必手动输入那些值.而且这些不必借

css3中webkit-box的用法(平分父元素)

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-).一.box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分 ht

css3 小三角的用法

<div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class="arrow-left"> <!--向左的三角--> </div> <div class="arrow-right"&

css3中transform的用法

transform:rotate旋转deg #box1{-moz-transform:rotate(10deg);-webkit-transform:rotate(10deg); }transform:skew倾斜#box2{-moz-transform:skew(20deg);-webkit-transform:skew(20deg); }transform:scale()放大#box3{-moz-transform:scale(2.0);-webkit-transform:scale(2.0

CSS3中box-shadow的用法介绍

一般我们通过box-shadow来设置盒阴影,但是有些属性我们一般没有用到,这篇文章将对box-shadow属性进行逐个分析.语法 CSS Code复制内容到剪贴板 E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 即: 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} inset 投影方式    此参数是一个可选值,如果不设值,其默认的投影方式

CSS3常用属性及用法

1.transition: 过渡属性,可以替代flash和javascript的效果 兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome 25 以及更早的版本,需要前缀 -webkit-. Safari 需要前缀 -webkit-. div { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari a

css3中webkit-box的用法

webkit-box 1.之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局.至少width要自己去算百分比.2.flexible box 就可以实现真正意义上的流体布局.只要给出相应属性,浏览器会帮我们做额外的计算. 提供的关于盒模型的几个属性: box-orient           子元素排列 vertical or horizontalbox-flex             兄弟元素之间比例,仅作一个系数box-

CSS3 :nth-child(N)的用法

h5标签:nth-child(N){}指定标签父元素的第N个子元素的css样式 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p:nth-child(2) 6 { 7 background:#ff0000; 8 } 9 </style> 10 </head> 11 <body> 12 13 <h1>这是标题</h1> 14 <p>第一个段

CSS3用法理解

这里只概括了我对CSS3各属性的用法理解.具体每个属性的值,以及例子,看这里 (竟然每篇文章不能低于200字,不能低于200字不能低于200字不能低于200字不能低于200字....请无视)