Dlaczego nie działa typ n-tego typu?

Question

Mam następujące HTML:

<section class="history"> 
    <div class="asked"> 
    <h1 class="user-show-tab-title">Questions</h1> 
    <div> 
     <ul class="question-index-false"></ul> 
    </div> 
    </div> 
    <div class="answered"> 
    <h1 class="user-show-tab-title">Answers</h1> 
    <div> 
     <ul class="question-index-false"></ul> 
    </div> 
    </div> 
</section> 

ja rozpaczliwie starając się wybrać i styl 2nd h1 element z klasy "user-show-tab-title" (tego z "odpowiedzi") ale z jakiegoś powodu .user-show-tab-title:nth-of-type(1) wybiera je oba, a .user-show-tab-title:nth-of-type(2) niczego nie wybiera.

Co daje?

Answer 1

To dlatego, że oba są pierwszymi z typu h1 w ramach elementu div. nth-of-type dotyczy tylko bezpośrednich relacji między dziećmi.

Należy również pamiętać, że nth pokrewnych selektorów zaczynają się od 1, tak aby wybrać drugie należałoby użyć 2 nie 1.

nie wiem rzeczywisty HTML, ale za to, co masz, można po prostu używać

.answered .user-show-tab-title 

Jeśli naprawdę chcesz używać nth-of-type, oto jak można go używać. Wstawiam trochę manekina <p> s inaczej, wszystkie dzieci z <section> będą tego samego typu.

.history div:nth-of-type(1) .user-show-tab-title { 
 
    background-color: lightblue; 
 
} 
 

 
.history div:nth-of-type(2) .user-show-tab-title { 
 
    background-color: #eee; 
 
}

<section class="history"> 
 
     <p>Dummy paragraph</p> 
 
     <p>Dummy paragraph</p> 
 
     <div class="asked"> 
 
     <h1 class="user-show-tab-title">Questions</h1> 
 
     <div> 
 
      <ul class="question-index-false"></ul> 
 
     </div> 
 
     </div> 
 
     <p>Dummy paragraph</p> 
 
     <p>Dummy paragraph</p> 
 
     <p>Dummy paragraph</p> 
 
     <div class="answered"> 
 
     <h1 class="user-show-tab-title">Answers</h1> 
 
     <div> 
 
      <ul class="question-index-false"></ul> 
 
     </div> 
 
     </div> 
 
    </section>

Answer 2

Dlaczego nie można po prostu wybrać .answered h1 zamiast? :) Twój selektor nie zadziała, ponieważ są pod różnymi rodzicami.