万万没想到，写了快三年前端，有不会用的css，居然还有完全没听过、见过的css属性，而且还是CSS2的内容！

关于counter-reset、content-increment两个属性的详解可以参看张鑫旭的博文：《CSS计数器(序列数字字符自动递增)详解》，这里做个记录，写个demo

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>content-increment</title>

<style>

.test li {margin:16px 0;padding:0;list-style:none;}

.test li li:before{color:#f00;font-family:'Microsoft YaHei';}

.counter1 li{counter-increment:testname;}

.counter1 li:before{content:counter(testname)".";}

.counter2 li{counter-increment:testname2 2;}

.counter2 li:before{content:counter(testname2)"/";}

.counter3 li{counter-increment:testname3 -1;}

.counter3 li:before{content:counter(testname3)")";}

.counter4 li{counter-increment:testname4;}

.counter4 li:before{content:counter(testname4, upper-roman)". ";}

.counter5 {counter-reset:testname5;}

.counter5 li:before{content: counters(testname5, '-') '. '; counter-increment: testname5;color:blue;font-family: 'Microsoft YaHei';}

</style>

</head>

<body>

<ul class="test">

	<li class="counter1">

		<strong>默认时的计数器：</strong>

		<ul>

			<li>列表项</li>

			<li>列表项</li>

			<li>列表项</li>

		</ul>

	</li>

	<li class="counter2">

		<strong>修改计数器每次增加的值为2：</strong>

		<ul>

			<li>列表项</li>

			<li>列表项</li>

			<li>列表项</li>

		</ul>

	</li>

	<li class="counter3">

		<strong>修改计数器每次增加的值为-1：</strong>

		<ul>

			<li>列表项</li>

			<li>列表项</li>

			<li>列表项</li>

		</ul>

	</li>

	<li class="counter4">

		<strong>修改计数器以罗马字符显示：</strong>

		<ul>

			<li>列表项</li>

			<li>列表项</li>

			<li>列表项</li>

		</ul>

	</li>

</ul>

<ul class="test counter5">

	<strong>计数器以嵌套计数显示:</strong>

	<li>父级</li>

	<li>父级

		<ul class="counter5">

			<li>子级1</li>

			<li>子级2</li>

			<li>子级3</li>

		</ul>

	</li>

	<li>父级

		<ul class="counter5">

			<li>子级1</li>

			<li>子级2</li>

			<li>子级3</li>

		</ul>

	</li>

	<li>父级</li>

</ul>

</body>

</html>

兼容情况还不错：

css content之counter-reset、content-increment的更多相关文章

  1. CSS counter计数器(content目录序号自动递增)详解

    一.CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用,而content属性貌似专门用在before/after伪元素上的.于是,就有了,“计数器↔伪元素↔content属 ...

  2. CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

    HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  3. iOS开发之AutoLayout中的Content Hugging Priority和 Content Compression Resistance Priority解析

    本篇博客的内容也不算太复杂,算是AutoLayout的一些高级的用法.本篇博客我们主要通过一些示例来看一下AutoLayout中的Content Hugging Priority以及Content C ...

  4. CSS伪元素:before/CSS伪元素:before/:after content 显示Font Awesome字体图标:after content 显示Font Awesome字体图标

    HTML <a href="javascript:volid(0);"><i class="icon-table"></i> ...

  5. CSS中quotes属性以及content的open（close）-quotes属性

    定义和用法 quotes 属性设置嵌套引用(embedded quotation)的引号类型. 可能的值 值 描述 none 规定 "content" 属性的 "open ...

  6. 205 Reset Content

    https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html The server has fulfilled the request and the ...

  7. CSS魔法堂：Reset CSS

    下列样式规则可用于最小化各浏览器标签样式的不一致性.注意:实际使用时应该对其进行适当的调整,以适应项目要求. /* http://meyerweb.com/eric/tools/css/reset/ ...

  8. css重置样式表reset.css

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,/* structural elements 结构元素 */ dl, dt, dd, ul, ol, l ...

  9. AutoLayout学习之理解intrinsicContentSize，Content Hugging Priority，Content Compression Resistance Priority

    TableViewCell的高度计算应该是所有开发者都会使用到的东西,之前都是用代码计算的方法来计算这个高度.最近有时间看了几个计算Cell高度的方法.基本上都用到了AutoLayout,这篇首先介绍 ...

  10. css最佳实践（reset.css）

    html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite ...

随机推荐

  1. 在linux平台实现atosl

    ➠更多技术干货请戳:听云博客 序言 怎么在linux 平台下实现一个类似于mac 平台下的 atos 工具( iOS 符号化解析)? 分析问题 在github上找到了几年前的开源实现,[https:/ ...

  2. 5.SVM核函数

    核函数(Kernels) 定义 1.1 (核或正定核) 设是中的一个子集,称定义在上的函数是核函数,如果存在一个从到Hilbert空间的映射 使得对任意的,都成立.其中表示Hilbert空间中的内积. ...

  3. 前端学PHP之MemCache

    × 目录 [1]作用 [2]安装 [3]管理[4]命令 前面的话 Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括 ...

  4. Objective-C runtime的常见应用

    用Objective-C等面向对象语言编程时,"对象"(object)就是"基本构造单元"(building block).开发者可以通过对象来存储并传递数据. ...

  5. Scala化规则引擎

    1. 引言 什么是规则引擎 一个业务规则包含一组条件和在此条件下执行的操作,它们表示业务规则应用程序的一段业务逻辑.业务规则通常应该由业务分析人员和策略管理者开发和修改,但有些复杂的业务规则也可以由技 ...

  6. window下使用Redis Cluster部署Redis集群

    日常的项目很多时候都需要用到缓存.redis算是一个比较好的选择.一般情况下做一个主从就可以满足一些比较小的项目需要.在一些并发量比较大的项目可能就需要用到集群了,redis在Windows下做集群可 ...

  7. DevExpress.XtraGrid.view.gridview 属性说明

    本文摘自: http://www.cnblogs.com/-ShiL/archive/2012/06/08/ShiL201206081335.html (一)双击展开,收缩字表 ExpandedChi ...

  8. The method getJspApplicationContext(ServletContext) is undefined for the type JspFactory

    The method getJspApplicationContext(ServletContext) is undefined for the type JspFactory 这是由于项目里面的一些 ...

  9. 开源物联网框架ServerSuperIO（SSIO），项目中实践应用介绍

    一.项目背景 我们是传统行业,但是我们有一颗不传统的心.企业用户遍布国内和国外,面对行业,要建设行业级的(大)数据平台.一提到大数据平台,大家往往想到Hadoop.Spark.Nosql.分布式等等, ...

  10. 大朋展翅 html5上传图片(三)一解决部分手机拍相册批量上传图片转向问题

    在经过前面的改进之后本来以为已经没有问题了,但经过我们神通广大的测试的测试,发现相册中的图片在上传时也会发生转向问题.既然前面都解决了拍照转向的问题,那么相册中图片的上传也容易解决.修改一下需要旋转图 ...