css3 计数器

css3计时器,根据个数自动增加。就不需要浪费一张图片资源了。
在此记下,方便后期翻阅

counter-increment属性递增一个或多个计数器值。
counter-increment属性通常用于counter-reset属性和content属性。

可能出现的值:

none:没有计数器将递增
id number:id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。
inherit:指定counter-increment属性的值,应该从父元素继承

用法:

<style type="text/css">
ol {
  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* 只增加计数器的当前实例 */
  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
}
</style>    

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
实现的效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容