클래스가있을 때 CSS 요소 및 카운터 재설정

Question

일반 목록이 아닌 요소를 계산하려고합니다.

코드를 설명하기 쉬운 : Fiddle

나는 HTML을 통해 어느 정도 제어 할 수 없습니다.

---

대신 DOM은 다음과 같이 세 가지가 항상 결코 리셋 카운터처럼 다음과 같이 밝혀

1. list one 
2. list one 
3. list one 
    1. list two 
    2. list two 
    3. list two 
1. list three 
2. list three 
3. list three  

그러나 목록 :

는

<div class="body"> 
    <div><p class="numlist" >first text</p></div> 
    <div><p class="numlist">second text</p></div> 
    <div><p class="numlist">third text</p></div> 
    <!-- Only here for only here in demonstrative purpose --> 
    <div class="should-reset"><p>Start a new counter for the inlines</p></div> 
    <div><p class="numlist depth">first text</p></div> 
    <div><p class="numlist depth">second text</p></div> 
    <div><p class="numlist depth">third text</p></div> 
    <!-- Only here for only here in demonstrative purpose --> 
    <div class="should-reset"><p>Want to reset the standard counter</p></div> 
    <div><p class="numlist reset" >first text</p></div> 
    <div><p class="numlist">second text</p></div> 
    <div><p class="numlist">third text</p></div>  
</div> 

내가 원하는 결과는 다음과 같은 것입니다 :

1. list three 
4. list three 
5. list three  

Answer 1

<ol> 태그를 사용하면 어떨까요?

비고/추가 :이 요구 사항은 내 대답을 게시 한 후 질문에 추가되었습니다. "HTML에 대한 통제력은 더 많거나 적습니다."

.inset { 
 
    margin-left: 20px; 
 
}

<ol> 
 
    <li> 
 
    first text 
 
    </li> 
 
    <li> 
 
    second text 
 
    </li> 
 
    <li> 
 
    third text 
 
    </li> 
 
    </ol> 
 

 
    <ol class="inset"> 
 
    <li> 
 
     first text 
 
    </li> 
 
    <li> 
 
     second text 
 
    </li> 
 
    <li> 
 
     third text 
 
    </li> 
 
    </ol> 
 
    
 
    <ol> 
 
    <li> 
 
     first text 
 
    </li> 
 
    <li> 
 
     second text 
 
    </li> 
 
    <li> 
 
     third text 
 
    </li> 
 
    </ol>

Answer 2

.body { 
 
    counter-reset: standard; 
 
} 
 

 
.should-reset { 
 
    counter-reset: standard; 
 
    color: red; 
 
} 
 

 
.numlist::before { 
 
    counter-increment: standard; 
 
    content: counter(standard) ". "; 
 
} 
 

 
.numlist.depth::before { 
 
    margin-left: 50px; 
 
}

<div class="body"> 
 
    <div><p class="numlist" >first text</p></div> 
 
    <div><p class="numlist">second text</p></div> 
 
    <div><p class="numlist">third text</p></div> 
 
    <div class="should-reset"><p>Start a new counter for the inlines</p> </div> 
 
    <div><p class="numlist depth" depth>first text</p></div> 
 
    <div><p class="numlist depth" depth>second text</p></div> 
 
    <div><p class="numlist depth" depth>third text</p></div> 
 
    <div class="should-reset"><p>Want to reset the standard counter</p> </div> 
 
    <div><p class="numlist" >first text</p></div> 
 
    <div><p class="numlist">second text</p></div> 
 
    <div><p class="numlist">third text</p></div> 
 
</div>

UPD :

.body { 
 
    counter-reset: standard; 
 
} 
 

 
.body div:nth-child(3n + 1) { 
 
    counter-reset: standard; 
 
} 
 

 
.numlist::before { 
 
    counter-increment: standard; 
 
    content: counter(standard) ". "; 
 
} 
 

 
.numlist.depth::before { 
 
    margin-left: 50px; 
 
}

<div class="body"> 
 
    <div><p class="numlist reset" >first text</p></div> 
 
    <div><p class="numlist">second text</p></div> 
 
    <div><p class="numlist">third text</p></div> 
 
    <div><p class="numlist depth" depth>first text</p></div> 
 
    <div><p class="numlist depth" depth>second text</p></div> 
 
    <div><p class="numlist depth" depth>third text</p></div> 
 
    <div><p class="numlist" >first text</p></div> 
 
    <div><p class="numlist">second text</p></div> 
 
    <div><p class="numlist">third text</p></div> 
 
</div>