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)"、";
     }
    

      效果图如下:

  • 相关阅读:
    保护ASP.NET 应用免受 CSRF 攻击
    在html页头设置不缓存
    ASP.NET MVC – 关于Action返回结果类型的事儿(上)
    UC浏览器 分享到朋友圈和微信好友
    利用java Base64 实现加密、解密
    Java图片工具类,完成图片的截取和任意缩放
    iscroll动态加载数据完美解决方案
    ASP.NET三层架构的分析
    如何用浏览器调试js代码
    练习使用jquery.并将验证强度的功能加到注册页面中
  • 原文地址:https://www.cnblogs.com/jiajia123/p/9053587.html
Copyright © 2011-2022 走看看