nth-of-type을 올바르게 구현하는 방법은 무엇입니까?

Question

<div id="Main"> 
    <div id="sub"> 
     <section id="sub2"> 
      <div>1</div> 
      <div>2</div> 
      <div>3</div> 
     </section> 
    </div> 
</div> 

"div : nth-of-type (1) before {content :"Foo : ";}"를 시도하면 Foo가 모든 div에 출력됩니다. 왜 이런 일이 일어 났는지 이해합니다. 섹션 주위의 div에 대해서만 출력 할 수있는 방법이 있습니까?

편집 : 동일한 문제가 있기 때문에 섹션의 nth을 수행 할 수 없습니다. 섹션 요소가있는 다른 장소도 있습니다.

Answer 1

SUB2 때문에, 고유해야합니다 :

#sub2 div:first-child::before{content: "Foo: ";}