counter-increment | 易学教程

一个很实用的css技巧简析

阅读更多关于一个很实用的css技巧简析

我是小雨小雨，专注于更新有趣、实用内容的小伙，如果内容对大家有一点帮助，那么就请动动手指，给个关注、点赞支持一下吧。 ^ - ^ 序言前两天接到一个需求，其中包括一个有序的列表，我们今天就来看看这个有序怎么做更方便、简单。当然，这个功能很简单：可以手动写死... 可以循环插入dom，用索引做前缀。原生循环或者利用框架的循环也可以用三行搓手手(css)自动计数今天主要说说如何用css来计数原理与介绍原理很简单，利用伪元素的content + counter()/counters() + counter-reset + counter-increment计数四剑客即可，但是咱们需要先了解一下这几个属性是什么，才能得心应手！ content(): 用于向伪元素中插入元素 counter-reset: 设置命名计数器，可设置多个。格式为 (计数器名称初始值) (计数器名称初始值) ... counter-increment: 用于增加某个计数器的值，可指定增加的具体值，可设置多个，格式同上。 counter系列(支持ie8以上) 可能看完死板的定义，还不能立马理解改如何做，所以这边画了个图：以码为兵，驰马试剑咱们看两个示例，加深一波理解。首先是counter(): <!DOCTYPE html> <html lang="en"> <head> <meta

你可能不知道的CSS 计数器

阅读更多关于你可能不知道的CSS 计数器

前言 CSS 里面的伪元素其实是非常好用的，但是经常容易被大家忽略，伪元素里面常用到的 content 属性，可能现在很多人仅仅以为 content 属性的值只支持字符串，除了字符串外常用到的还有 uri 、 counter ，今天所要介绍的就是 conter(计数器)。先看如下的例子： <div> <h3>桃翁</h3> <h3>介绍</h3> <h3>css 计数器</h3> </div> 根据如上的 HTML 你是否有办法不通过 JavaScript ，仅仅用 CSS 在 title 前面增加 Title number: 呢？ CSS 计数器基本概念如果仅仅增加一个 Title ，大家都知道通过伪元素(:before或者:after)，设置 content 为 Title，但是如何自动根据 h3 出现的顺序来展示自动编号可能很多人就不知道了。自动编号在 CSS 2.1 中是通过两个属性控制的， 'counter-increment' 和 'counter-reset' 。通过这些属性定义的计数器用于 'content’ 属性的 counter() 和 counters() 函数初始化计数器在使用计数器的时候需要先初始化这个计数器，并且设置一个计数器的名字(变量)。下面是例子，title 就是名字，conter-reset 就是用来初始化的，这个属性是必须设置的

CSS 计数器详解

阅读更多关于 CSS 计数器详解

在前端开发中总少不了列表项，对于列表项序号，射鸡师一般会列出个1，2，3...序号。在不了解css计数器属性之前，我一般会用精灵图，用类名来区分序列号图片。这样做尽管可以达到目的，但是很不方便，开发过程耗时较长而且维护修改起来较困难。用css counter配合伪类的content完美的解决了这个问题，这里详细介绍下css counter属性计数器属性介绍计数器的值通过使用counter-reset 和 counter-increment 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。 counter-reset 设置计数器的名称和起始值 Name:counter-reset Value: [ <custom-ident> <integer>? ]+ | none Initial: none Applies to: all elements Inherited: no Percentages: n/a Computed value: the keyword none or a list, each item an identifier paired with an integer Canonical order: per grammar Animation type: by computed value type custom