CSS 基础学习-231 css多级嵌套计数器

由 hrs, 4 九月, 2023

实例代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			ol{
				counter-reset:section;  /*重置数字递增*/
				list-style-type:none;
			}
			li::before{
				counter-increment:section;
				content:counters(section,".")" ";
			}	

		</style>
	</head>
	<body>
		<ol>
			<li>item</li>
			<li>item 
				<ol>
					<li>item</li>
					<li>item</li>
					<li>item</li>
						<ol>
							<li>item</li>
							<li>item</li>
							<li>item</li>
						</ol>
					<li>item</li>
				</ol>
				</li>
			<li>item</li>
			<li>item</li>
		</ol>

		<ol>
			<li>item</li>
			<li>item</li>
		</ol>
	</body>
</html>

运行效果：

标签

评论