CSS3每日一練以內容處理-嵌套編號

時間 2019-11-16

標籤 css3 css 每日內容處理嵌套編號欄目 CSS 简体版

原文原文鏈接

出處：http://www.w3cfuns.com/thread-5592229-1-17.htmlcss

一、大標題一
　  一、子標題
　  二、子標題
　  三、子標題
二、大標題二
　  一、子標題
　  二、子標題
三、大標題三
　  一、子標題
　  二、子標題
　  三、子標題

這種問題，你可能會以爲直接定義兩個計數器，分別編號不就好了，因而就寫出了以下代碼：html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一練以內容處理-嵌套編號 | 前端開發網(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
h2{counter-increment:myCounter;}
h2:before{color:#05a; content:counter(myCounter)"、";}
p{counter-increment:sub;}
p:before{margin-left:20px; content:counter(sub)"、";}
</style>
</head>
<body>
<h2>大標題</h2>
<p>子標題</p>
<p>子標題</p>
<p>子標題</p>
<h2>大標題</h2>
<p>子標題</p>
<p>子標題</p>
<h2>大標題</h2>
<p>子標題</p>
<p>子標題</p>
<p>子標題</p>
</body>
</html>

複製代碼

但是這麼作真的就正確嗎，彷佛有些不對勁，全部的子標題會一直往下編號，按道理來說，在第二個大標題中，子標題應該從1開始計數了。也就是說，咱們必須對每一個大標題中的子標題的編號進行重置才行！下面咱們就來學習一下重置屬性。

counter-reset
咱們只要在大標題的樣式中定義此屬性，其值就是子標題的編號名稱，因而咱們就寫出了以下代碼：
h2{counter-increment:myCounter; counter-reset:sub;}
h2:before{color:#05a; content:counter(myCounter)"、";}
p{counter-increment:sub;}
p:before{margin-left:20px; content:counter(sub)"、";}

代碼案例：前端

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一練以內容處理-嵌套編號 | 前端開發網(W3Cfuns.com)！</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
h2{counter-increment:myCounter; counter-reset:sub;}
h2:before{color:#05a; content:counter(myCounter)"、";}
p{counter-increment:sub;}
p:before{margin-left:20px; content:counter(sub)"、";}
</style>
</head>
<body>
<h2>大標題</h2>
<p>子標題</p>
<p>子標題</p>
<p>子標題</p>
<h2>大標題</h2>
<p>子標題</p>
<p>子標題</p>
<h2>大標題</h2>
<p>子標題</p>
<p>子標題</p>
<p>子標題</p>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。