CSS计数器 counter

适用场景:

当排序以及序号变动对服务端造成的压力大的情况下,使用css计数。 在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了counter这一属性,配合伪元素:before、:after中的content使用,便可以对指定的元素进行排序。

CSS计数器包括了counter-reset、counter-increment、content三个属性、counter() 函数

定义和用法:

counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。如果使用了 “display: none”,则无法增加计数。如使用 “visibility: hidden”,则可增加计数。

可能的值:

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

counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。

可能的值:

none 默认。不能对选择器的计数器进行重置。 id number id 定义重置计数器的选择器、id 或 class。 number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。 inherit 规定应该从父元素继承 counter-reset 属性的值。

counter()函数只能被使用在content属性上。如果想重复多次计数器可以使用 counters()

第一个参数:counter-increment中定义的计数器标识符; 第二个参数:计数器风格,类似于list-style-type。

demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>练小习的前端技术笔记</title>

<style type="text/css">

body {counter-reset:section;}

h1 {counter-reset:subsection;}

h1:before

{

counter-increment:section;

content:"Section " counter(section) ". ";

}

h2:before

{

counter-increment:subsection;

content:counter(section) "." counter(subsection) " ";

}

</style>

</head>

<body>

<h1>HTML tutorials</h1>

<h2>HTML Tutorial</h2>

<h2>XHTML Tutorial</h2>

<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>

<h2>JavaScript</h2>

<h2>VBScript</h2>

<h1>XML tutorials</h1>

<h2>XML</h2>

<h2>XSL</h2>

</body>

</html>

提示:你可以先修改部分代码再运行。

浏览器兼容情况:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LanceToBigData

Vue.js之Vue计算属性、侦听器、样式绑定

1)el(挂载点) 创建一个Vue这个实例去接管页面中的某个Element(元素)。也就是说el表明和页面上 哪一个节点做绑定! 2)data vue实...

2473
来自专栏web前端教室

JS基础知识之new操作符 | 前端卧谈会第9期

音频请点此进行收听 音频原文: new操作符是个啥? 就是你搞个 function abc(aa){ this.abc = aa } 然后 var xx = ...

1889
来自专栏性能与架构

JS中控制好this关键字的指向

javascript中的 this 的指向不太好控制,理解不好的话很容易错误 下面几个示例可以加深对this指向的理解 (1)内联事件 <a href="...

28411
来自专栏Young Dreamer

setInterval(code, time)中code传递参数办法

1.使用setInterval的场景 有时我们需要隔一定的时间执行一个方法,这时就会用到setInterval,但是由于这个方法是浏览器模拟出的Timer线程,...

1849
来自专栏LanceToBigData

Jsoup(一)Jsoup详解(官方)

一、Jsoup概述 1.1、简介     jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API...

1.2K5
来自专栏coder修行路

Python爬虫从入门到放弃(十四)之 Scrapy框架中选择器的用法

Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分 Xpath是专门在X...

2028
来自专栏前端说吧

vue-学习笔记(更新中...)

9426
来自专栏行者常至

005.golang 控制语句

1023
来自专栏IT开发技术与工作效率

VBA函数与过程简洁教程

2063
来自专栏xingoo, 一个梦想做发明家的程序员

快速排序

快速排序时间复杂度为O(nlogn),由于是在原数组上面利用替换来实现,因此不需要额外的存储空间。 算法思想:   通过设置一个岗哨,每次跟这个岗哨进行比较,比...

21510

扫码关注云+社区

领取腾讯云代金券