CSS实例教程;使用:before和:after插入内容

content:"第"counter(mycounter)"章 ";

把文字用引号引起来，添加的文字与counter(mycounter)之间可以有空格，也可以不用空格，但它们都不会显示出来。在浏览器中查看添加文字后的结果（ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

不仅在编号中可以添加文字，我们还可以改变编号的类型。我们可以使用list-style-type的值，调用方法counter(name,list-style-type的值);

css样式：

		h1{
			counter-increment:mycounter;
		}
		h1:before{
			content:"第"counter(mycounter,upper-roman)"章 ";
		}

html代码：

	<h1>大标题</h1>
	<h1>大标题</h1>
	<h1>大标题</h1>

这里，我们使用的是大写罗马字母，来看一下浏览器中的表现（ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

练习：我们都知道，list-style-type的值可以取circle这类的值，那么这里会怎么显示呢？

下面我们来看一下编号嵌套，这在目录中是非常常见的。来看一下例子：

css样式：

		dt{
			counter-increment:btitle;
		}
		dd{
			counter-increment:stitle;
		}
		dt:before{
			content:counter(btitle)".";
		}
		dd:before{
			content:counter(btitle)"."counter(stitle)".";
		}

html代码：

	<dl>
		<dt>大标题</dt>
		<dd>小标题</dd>
		<dd>小标题</dd>
		<dt>大标题</dt>
		<dd>小标题</dd>
		<dd>小标题</dd>
		<dt>大标题</dt>
		<dd>小标题</dd>
		<dd>小标题</dd>
		<dt>大标题</dt>
		<dd>小标题</dd>
		<dd>小标题</dd>
		<dd>小标题</dd>
	</dl>

来看一下浏览器中的显示效果：

这种显示效果，确实没有达到我的要求，因为2.3 2.4按照我们的需求，应该是2.1 2.2，同理，后面的也是。但是浏览器非常给力的提供了一个属性counter-reset，从字面意思我们就知道，它是用来重置的。来看例子如何使用：

css样式：

		dt{
			counter-increment:btitle;
			counter-reset:stitle;
		}
		dd{
			counter-increment:stitle;
		}
		dt:before{
			content:counter(btitle)".";
		}
		dd:before{
			content:counter(btitle)"."counter(stitle)".";

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!