万万没想到，写了快三年前端，有不会用的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. 工作笔记--哪些bug应由研发发现？

      标准: 研发应发现: 主功能流程无法正常使用,以及联调时主功能流程是否正常 功能缺失 打包时数据库表非最新.程序文件非最新: 文件导出时有明显错误(如无法导出.导出后格式明显不对.批量导入出错) ...

  2. 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  3. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  4. 已经重写，源码和文章请跳转http://www.cnblogs.com/ymnets/p/5621706.html

    文章由于写得比较仓促 已经重写,源码和文章请跳转 http://www.cnblogs.com/ymnets/p/5621706.html 系列目录 前言: 导入导出实在多例子,很多成熟的组建都分装了 ...

  5. MUI 个推获取ClientID的方法

               本次是获取个推ClientID的方法              //监听消息开始             document.addEventListener("plus ...

  6. SQL Tuning 基础概述03 - 使用sql_trace和10046事件跟踪执行计划

    1.使用sql_trace跟踪执行计划 1.1 当前session跟踪: alter session set sql_trace = true; //开始sql_trace alter session ...

  7. 读书笔记--SQL必知必会18--视图

    读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...

  8. CSS学习笔记——包含块 containing block

    以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定 ...

  9. 《JavaScript 代码优化指南》

      ~~教你向老鸟一样敲代码~~. 1. 将脚本放在页面的底部 ... <script src="./jquery.min.js"></script> &l ...

  10. Qt安装配置

    Qt Creator: 下载: Qt 5.5.1 for Windows 32-bit(MinGW 4.9.2, 1.0 GB):http://download.qt.io/official_rele ...