CSS计数器counters列表被reset乱入实例页面

CSS代码：

.reset { padding-left: 20px; counter-reset: wangxiaoer; line-height: 1.6; color: #666; }
.counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer; font-family: arial black; }
.reset ~ .counter { color: #cd0000; }
                

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>