CSS部分
.reset {
padding-left: 20px;
counter-reset: wangxiaoer;
}
.counter:before {
content: counters(wangxiaoer, '-') '. ';
counter-increment: wangxiaoer;
}声邦、
HTML部分:
<div class="reset">
<div class="counter">我是王小二
<div class="reset">
<div class="counter">我是王小二的大兒子</div>
<div class="counter">我是王小二的二兒子
<div class="reset">
<div class="counter">我是王小二的二兒子的大孫子</div>
<div class="counter">我是王小二的二兒子的二孫子</div>
<div class="counter">我是王小二的二兒子的小孫子</div>
</div>
</div>
<div class="counter">我是王小二的三兒子</div>
</div>
</div>
<div class="counter">我是王小三</div>
<div class="counter">我是王小四
<div class="reset">
<div class="counter">我是王小四的大兒子</div>
</div>
</div>
</div>
-
counter-reset: wangxiaoer;
計數(shù)器重置;使用這個為計數(shù)器命名為 wangxiaoer蔼夜;
-
counter-increment: wangxiaoer;
計數(shù)器遞增矩欠;用這個來做加一加一加一這種事猾蒂;
對普照源counter-reset沒進行一次普照询一,即這條語句出現(xiàn)一次隐孽,普照源加一
(普照規(guī)則 張鑫旭 css世界中提到的)
-
content: counters(wangxiaoer, '-') '. ';
counters(name, string) 第一個參數(shù)name是計數(shù)器的名字,第二個參數(shù)string使用‘’包裹起來健蕊。
例如counters(wangxiaoer, '-')最終效果應為 1-1.