css content之counter-reset、content-increment - Canrz-html教程-PHP中文网

首页

web前端

html教程

css content之counter-reset、content-increment - Canrz

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2016 am 08:35 AM

万万没想到，写了快三年前端，有不会用的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>

登录后复制

兼容情况还不错：

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7685

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。