Tại sao không hoạt động?

Question

Tôi có HTML sau:

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

Tôi đang rất cố gắng để lựa chọn và phong cách h1 yếu tố thứ 2 với lớp "user-show-tab-danh hiệu" (một với "câu trả lời") nhưng vì lý do nào đó, .user-show-tab-title:nth-of-type(1) chọn cả hai và .user-show-tab-title:nth-of-type(2) không chọn bất kỳ thứ gì.

Điều gì mang lại?

Answer 1

Đó là vì chúng đều là loại đầu tiên trong loại h1 trong div. nth-of-type chỉ áp dụng cho mối quan hệ trẻ em ngay lập tức.

Cũng lưu ý rằng nth selectors có liên quan bắt đầu từ 1, vì vậy để lựa chọn thứ hai bạn sẽ sử dụng 2, chứ không phải 1.

Tôi không biết HTML thực tế của bạn, nhưng đối với những gì bạn có, bạn có thể chỉ sử dụng

.answered .user-show-tab-title 

Nếu bạn thực sự muốn sử dụng nth-of-type, dưới đây là cách bạn có thể sử dụng. Tôi đang chèn một số giả <p> s nếu không, tất cả trẻ em của <section> sẽ có cùng loại.

.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

Tại sao bạn không chỉ cần chọn .answered h1 để thay thế? :) công cụ chọn của bạn sẽ không hoạt động vì chúng nằm trong các bậc cha mẹ khác nhau.