万万没想到，写了快三年前端，有不会用的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. ContentProvider域名替换小工具

    开发项目域名想怎么换就怎么换,就是这么任性! 这是一个很有意思的小工具! 这是一个方便开发人员和测试人员的小工具!! 吐槽: 一直在做Android开发,一直总有一个问题存在:做自己公司的apk开发时 ...

  2. 1、Python基础知识

    输出print “houkai”,3.0版本后print修改为函数,print(‘houkai’) 数学运算:默认整数整除1/2=0而1.0/2=0.5,可以使用from __future__ imp ...

  3. H5 Notes：Navigator Geolocation

    H5的地理位置API可以帮助我们来获取用户的地理位置,经纬度.海拔等,因此我们可以利用该API做天气应用.地图服务等. Geolocation对象是我们获取地理位置用到的对象. 首先判断浏览器是否支持 ...

  4. Java异常总结

    异常就是在程序中可能要发生的未知错误,java机制中异常分为2大类:Exception和Error. 对异常的处理方式有2种,一是将异常通过关键字throws抛出,二是将异常进行try catch处理 ...

  5. c 二叉树的使用

    简单的通过一个寻找嫌疑人的小程序 来演示二叉树的使用 #include <stdio.h> #include <stdlib.h> #include <string.h& ...

  6. 时间复杂度分别为 O（n）和 O（1）的删除单链表结点的方法

    有一个单链表,提供了头指针和一个结点指针,设计一个函数,在 O(1)时间内删除该结点指针指向的结点. 众所周知,链表无法随机存储,只能从头到尾去遍历整个链表,遇到目标节点之后删除之,这是最常规的思路和 ...

  7. 深入理解javascript原生拖放

    × 目录 [1]拖放源 [2]拖放目标 [3]dataTransfer对象[4]改变光标 前面的话 拖放(drag-and-drop,DnD)其实是两个动作——拖和放.所以,它涉及到两个元素.一个是被 ...

  8. 配置Chrome支持本地（file协议）的AJAX请求

    什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...

  9. Windows下Memcached安装与配置实例

    环境声明: 服务器: Windows Server 2008r2: Memcached: Memcached 64-bit for Windows(64位) From: http://www.urie ...

  10. Moon.Orm 配置说明

    一.在线技术文档: http://files.cnblogs.com/files/humble/d.pdf   二.使用的大致流程   1.首先下载代码生成器,可以一键生成项目Model层;(其中含有 ...