美文网首页
css3 计数器

css3 计数器

作者: Amfishers | 来源:发表于2017-08-03 16:24 被阅读34次

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>
实现的效果

相关文章

  • css3 计数器

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

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • CSS3-目录

    1 CSS3 兼容性 2 CSS3 选择器 3 CSS3 新加属性 4 CSS3 过渡动画 5 CSS3 变型 6...

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

  • jmeter计数器的使用

    1、计数器简介 2、添加计数器 3、计数器界面如下: 1(starting value):给定计数器的起始值、初始...

  • CountDownLatch

    计数器,指定计数器的大小,当执行latch.countDown()后计数器减一,当计数器等于0时才能执行latch...

  • css3渐变:线性和径向

    知识点: CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变 渐变(gradients)可以在两个...

  • CSS3设置圆角边框 圆角特效代码 CSS3的圆角border-

    CSS3设置圆角边框 css3圆角特效代码 CSS3 border-radius 属性 使用 CSS3 borde...

  • 【2019-05-09】MapReduce的特性

    计数器内置计数器 任务计数器采集任务的相关信息,每个作业的所有任务的结果会被聚集起来。任务计数器由其关联任务维护,...

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

网友评论

      本文标题:css3 计数器

      本文链接:https://www.haomeiwen.com/subject/xdmplxtx.html