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