क्यों काम नहीं करता है?

मेरे पास निम्न 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>

मैं सख्त चयन और शैली के लिए वर्ग "उपयोगकर्ता के शो-टैब-शीर्षक" ("उत्तर" के साथ) के साथ 2 h1 तत्व कोशिश कर रहा हूँ लेकिन किसी कारण से .user-show-tab-title:nth-of-type(1) उन्हें चुनता है और .user-show-tab-title:nth-of-type(2) कुछ भी नहीं चुनता है।

क्या देता है?

स्रोत

2015-05-26 lonewarrior556

क्योंकि वे अलग-अलग माता-पिता के अधीन हैं और प्रत्येक माता-पिता के पास केवल एक 'एच 1' है। – Harry

स्पष्ट बताते हुए बड़े जोखिम पर: आप जानते हैं कि इस परिदृश्य में आप केवल माता-पिता का उपयोग कर तत्व को लक्षित कर सकते हैं, यानी ... यानी। '। उत्तर दिया गया एच 1 {...}' – Mikk3lRo

@ मिक 3 एलआरओ हां, मुझे अभी एहसास हुआ कि ओपी ने सोचा था कि 'एनएचटी ऑफ टाइप (1)' दूसरा चयन करेगा। –

ऐसा इसलिए है क्योंकि वे दोनों div के पहले h1 के प्रकार हैं। nth-of-type केवल तत्काल बाल संबंधों पर लागू होता है।

भी ध्यान रखें कि nth संबंधित चयनकर्ताओं 1 से शुरू करें, तो 1.

दूसरा आप 2 का प्रयोग करेंगे, नहीं मैं अपने वास्तविक HTML पता नहीं है का चयन करने के लिए, लेकिन के लिए आपके पास क्या है, तो आप सिर्फ यह कर सकते हैं का उपयोग

.answered .user-show-tab-title

तुम सच में nth-of-type का उपयोग करना चाहते हैं, तो यहां आप इसका इस्तेमाल कर सकते हैं। मैं कुछ डमी <p> एस डाल रहा हूं अन्यथा, <section> के सभी बच्चे एक ही प्रकार के होंगे।

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

स्रोत

2015-05-26 14:09:57

शायद आप '.history div: nth-of-type (2) .user-show-tab-title' सहित अपना उत्तर सुधार सकते हैं जो सही उपयोग दिखाएगा। – Mikk3lRo

@ मिक्क 3 एलआरओ मुझे लगता है कि मैं ऐसे उपयोग का एक उदाहरण भी दिखा सकता हूं जो काम करता है और समझ में आता है। –

आप क्यों नहीं बस के बजाय .answered h1 का चयन नहीं करते? :) आपका चयनकर्ता काम नहीं करेगा क्योंकि वे अलग-अलग माता-पिता के अधीन हैं।

स्रोत

2015-05-26 14:12:11

क्यों काम नहीं करता है?

उत्तर

संबंधित मुद्दे