你的位置:首页 > 网页设计

[网页设计]css content之counter


万万没想到,写了快三年前端,有不会用的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 >	<li >		<strong>默认时的计数器:</strong>		<ul>			<li>列表项</li>			<li>列表项</li>			<li>列表项</li>		</ul>	</li>	<li >		<strong>修改计数器每次增加的值为2:</strong>		<ul>			<li>列表项</li>			<li>列表项</li>			<li>列表项</li>		</ul>	</li>	<li >		<strong>修改计数器每次增加的值为-1:</strong>		<ul>			<li>列表项</li>			<li>列表项</li>			<li>列表项</li>		</ul>	</li>	<li >		<strong>修改计数器以罗马字符显示:</strong>		<ul>			<li>列表项</li>			<li>列表项</li>			<li>列表项</li>		</ul>	</li></ul><ul >	<strong>计数器以嵌套计数显示:</strong>	<li>父级</li>	<li>父级		<ul >			<li>子级1</li>			<li>子级2</li>			<li>子级3</li>		</ul>	</li>	<li>父级		<ul >			<li>子级1</li>			<li>子级2</li>			<li>子级3</li>		</ul>	</li>	<li>父级</li></ul></body></html>

兼容情况还不错: