zoukankan      html  css  js  c++  java
  • 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)"、";
     }
    

      效果图如下:

  • 相关阅读:
    sublime问题:失去焦点自动保存
    sublime问题:Tab键不缩进
    sublime问题:默认的中文字体显示异常
    pip换源 解决下载速度慢
    Oracle问题:ORA-01843: 无效的月份
    Eclipse设置自动生成的javadoc
    Java命名规范
    redis的道面试题, 有这一篇就足够了
    批量编译生成python的pyd文件
    测试种类大汇总(45类)
  • 原文地址:https://www.cnblogs.com/jiajia123/p/9053587.html
Copyright © 2011-2022 走看看