CSS计数器counters列表被reset乱入

HTML

<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>
					    

CSS

.reset { 
  padding-left: 20px; 
  counter-reset: wangxiaoer;
}
.counter:before {
  content: counters(wangxiaoer, '-') '. '; 
  counter-increment: wangxiaoer;
}

.reset ~ .counter { 
    color: #cd0000; 
}

.demo .counter {
  width: 300px;
  margin: auto;
  text-align: left;
}
					    

JS

//no