CSS 基础学习-230 css嵌套计数器

由 hrs, 4 九月, 2023

实例代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body{
				counter-reset:section;  /*重置数字递增*/

			}
			h2{
				counter-reset:subsection;
			}
			h2::before {   /*使用伪元素::before 在H2 标签前插入*/
				counter-increment:section;   /* 数字递增*/
				content:"Section "counter(section)": ";  /*内容输出*/
			}
			h4::before{
				counter-increment:subsection;
				content:counter(section)"."counter(subsection)":  ";
			}
			h4{

				text-indent:2em;
			}
		</style>
	</head>
	<body>
		<h1>使用CSS嵌套计数器：</h1>
		<h2>HTML 教程</h2>
		<h4>HTML简介</h4>
		<h4>HTML 基础</h4>
		<h4>HTML 编辑器</h4>
		<h2>CSS 教程</h2>
		<h4>CSS 使用</h4>
		<h4>CSS 注释</h4>
		<h4>CSS 颜色</h4>

		<h2>JavaScript 教程</h2>
		<h4>Javascript 语句</h4>
		<h4>Javascript变量</h4>
		<h4>Javascript运算符</h4>

	</body>
</html>

运行效果：

标签

评论