万万没想到，写了快三年前端，有不会用的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. Uncaught RangeError: Maximum call stack size exceeded 调试日记

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 开发道路上不是解决问题最重要,而是解决问题的过程,这个过程我们称之为~~~调试 记 ...

  2. Livecoding.tv2.5发布，增加“用户搜索引擎”功能，方便用户找到匹配的程序员

    近日,在Livecoding.tv最新发布的博客中,介绍了该平台2.5版的一系列新功能,其中的User Discovery Engine(用户搜索引擎)受到大家的欢迎.使用该引擎,可以很方便地查找在L ...

  3. Dreamweaver 扩展开发： Calling a C++ function from JavaScript

    After you understand how C-level extensibility works in Dreamweaver and its dependency on certain da ...

  4. 火狐浏览器中event不起作用解决办法--记录（一）

    今天遇到了这个问题.IE,谷歌下都没问题,但在FF下却不起作用,很郁闷查了半天,看别人博文写了老长,结果试了要么起作用,但太麻烦,要么不起作用,说了那么多跟没说一样. 其实只要这一句代码就行:e=ar ...

  5. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。

    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...

  6. 初识Hadoop

    第一部分:              初识Hadoop 一.             谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...

  7. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证

    验证: 快要完成我们程序的界面部分了.剩下的事情就是在用户点击 "保存" 的时候管理验证问题了.验证是主要需求,今天就是最无知的应用也不会忽视它.通过正确的验证,用户可以知道应该输 ...

  8. C# ShellExcute与Process

    C#运行外部程序的两种方法 ShellExecute using System.Runtime.InteropServices; public enum ShowWindowCommands : in ...

  9. C#开发微信门户及应用(24)-微信小店货架信息管理

    在前面微信小店系列篇<C#开发微信门户及应用(22)-微信小店的开发和使用>里面介绍了一些微信小店的基础知识,以及<C#开发微信门户及应用(23)-微信小店商品管理接口的封装和测试& ...

  10. Yii2.x 互斥锁Mutex-类图