recently, I was reading an article by Zhang Xuxin about css counters. The link is https://www.zhangxinxu.com/wo.. I just don"t understand when I see the following piece. Figures 1.1 and 1.2 are nested in two reset, but 1.3,1.4 are only nested in the outermost reset. Why would they pick it up? How is the internal calculation of counters? ask the boss to explain
CSS Code:
.reset { padding-left: 20px; counter-reset: wangxiaoer; line-height: 1.6; color: -sharp666; }
.counter:before { content: counters(wangxiaoer, "-") ". "; counter-increment: wangxiaoer; font-family: arial black; }
.reset ~ .counter { color: -sharpcd0000; }
HTML Code:
<div class="reset">
<div class="counter"></div>
<div class="reset">
<div class="counter"></div>
<div class="counter"></div>
<div class="reset">
<div class="counter"></div>
<div class="counter"></div>
<div class="counter"></div>
</div>
<div class="counter"></div>
</div>
<div class="counter"></div>
<div class="counter"></div>
<div class="reset">
<div class="counter"></div>
</div>
</div>