万万没想到，写了快三年前端，有不会用的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. mongoose - 让node.js高效操作mongodb

    Mongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装,一种对象模型工具,类似ORM,Mongoose将数据库中的数据转换为JavaScript对象以供你在应用中使用. ...

  2. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  3. Compile FreeCAD on Windows

    Compile FreeCAD on Windows eryar@163.com 1.Introduction FreeCAD是一个参数化的三维造型软件,主要用于任意大小的实际模型的设计.参数化的建模 ...

  4. leetcode--5. Longest Palindromic Substring

    题目来自 https://leetcode.com/problems/longest-palindromic-substring/ 题目:Given a string S, find the long ...

  5. Linux基礎知識 —— open&close

    下面說一下在用戶空間調用open/close/dup跟驅動中的open和release的對應. 下面是測試驅動: #include <linux/module.h> #include &l ...

  6. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  7. 增强学习（二）----- 马尔可夫决策过程MDP

    1. 马尔可夫模型的几类子模型 大家应该还记得马尔科夫链(Markov Chain),了解机器学习的也都知道隐马尔可夫模型(Hidden Markov Model,HMM).它们具有的一个共同性质就是 ...

  8. 压力测试之badboy和Jmeter的简单使用方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 所谓压力测试是指,通过确定一个系统的瓶颈或者不能接收的性能点, ...

  9. StructureMap 代码分析之Widget 之Registry 分析 (1)

    说句实话,本人基本上没用过Structuremap,但是这次居然开始看源码了,不得不为自己点个赞.Structuremap有很多的类,其中有一个叫做Widget的概念.那么什么是Widget呢?要明白 ...

  10. Error:const char* 类型的实参和LPCWSTR类型的形参不兼容的解决方法。

    在C++的Windows 应用程序中经常碰到这种情况. 解决方法: 加入如下转换函数: LPCWSTR stringToLPCWSTR(std::string orig) { size_t origs ...