CSS3中的content属性使用示例

XML/HTML Code复制内容到剪贴板

<h1>大标题</h1>  
<p>文字</p>  
<h1>大标题</h1>  
<p>文字</p>  
<h1>大标题</h1>  
<p>文字</p>  
<h1>大标题</h1>  
<p>文字</p>  

css:

CSS Code复制内容到剪贴板

h1:before{   
    content:counter(my)’.’;   
}   
h1{   
    countercounter-increment:my;   
}  

运行结果：
https://jsfiddle.net/dwqs/2ueLg3uj/
项目编号修饰

默认插入的项目编号是数字型的，1,2,3.。。。自动递增，也能给项目编号追加文字和样式,依旧利用上面的html，css修改如下：

CSS Code复制内容到剪贴板

h1:before{   
    content:’第’counter(my)’章’;   
    color:red;   
    font-size:42px;   
}   
h1{   
    countercounter-increment:my;   
}  

运行结果：
https://jsfiddle.net/dwqs/17hqznca/
指定编号种类

利用content(计数器名，编号种类)格式的语法指定编号种类，编号种类的参考可以依据ul的list-style-type属性值。利用上述的html，css修改如下：

CSS Code复制内容到剪贴板

h1:before{   
    content:counter(my,upper-alpha);   
    color:red;   
    font-size:42px;   
}   
h1{   
    countercounter-increment:my;   
}  

运行结果：
https://jsfiddle.net/dwqs/4nsrtxup/
编号嵌套

大编号中嵌套中编号，中编号中嵌套小编号。
html:

XML/HTML Code复制内容到剪贴板

<h1>大标题</h1>  
<p>文字1</p>  
<p>文字2</p>  
<p>文字3</p>  
<h1>大标题</h1>  
<p>文字1</p>  
<p>文字2</p>  
<p>文字3</p>  
<h1>大标题</h1>  
<p>文字1</p>  
<p>文字2</p>  
<p>文字3</p>  

css:

CSS Code复制内容到剪贴板

h1::before{   
    content:counter(h)’.’;   
}   
h1{   
    countercounter-increment:h;