利用 css 实现标题自动编号

利用 css 实现标题自动编号_第1张图片效果图


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题自动编号title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
		h1 {
		    counter-reset: one;  /* 创建一个计数器 */
		}

		h2 {
		    counter-reset: two;
		}
		h2:before {
		    counter-increment: one; /* 自动将计数器加 1 */
		    content: counter(one) "- "; /* 获取计数器值,把它填写在 content 中 */
		}

		h3 {
		    counter-reset: three;
		}
		h3:before {
		    counter-increment: two;
		    content: counter(one) "." counter(two) "- ";
		}

		h4 {
		    counter-reset: four;
		}
		h4:before {
		    counter-increment: three;
		    content: counter(one) "." counter(two) "." counter(three) "- ";
		}

		h5 {
		    counter-reset: five;
		}
		h5:before {
		    counter-increment: four;
		    content: counter(one) "." counter(two) "." counter(three) "." counter(four) "- ";
		}
    style>
head>
<body>

<h1>主标题h1>
	<h2>标题h2-1h2>
		<h3>标题h3-1h3>
		<h3>标题h3-2h3>
			<h4>标题h4-1h4>
				<h5>标题h5-1h5>
				<h5>标题h5-2h5>
			<h4>标题h4-2h4>
		<h3>标题h3-3h3>
	<h2>标题h2-2h2>
		<h3>标题h3-1h3>
		<h3>标题h3-2h3>
			<h4>标题h4-1h4>
			<h4>标题h4-2h4>
				<h5>标题h5-1h5>
				<h5>标题h5-2h5>
		<h3>标题h3-3h3>
		<h3>标题h3-4h3>
body>
html>

你可能感兴趣的:(前端)