वैकल्पिक तत्वों का पृष्ठभूमि-रंग बदलें css

Question

मैं वैकल्पिक तत्वों का रंग बदलना चाहता हूं, लेकिन मेरा कोड काम नहीं कर रहा है। मेरा कोड पूरे कंटेनर तत्व का रंग बदलता है।

क्या कोई मुझे बता सकता है कि मैं कोड में गलती कहां कर रहा हूं?

.pvt-msg-panel { 
 
    height: 92vh; 
 
    float: left; 
 
    margin-top: -20px; 
 
} 
 
#pvt-messages-box { 
 
    height: 50vh; 
 
    width: 650px; 
 
    margin-top: 10px; 
 
    margin-left: 10px; 
 
    overflow-y: scroll; 
 
} 
 
.pvt-messages-box-item { 
 
    padding: 10px; 
 
    padding-left: 20px; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    color: black; 
 
    padding-left: 20px; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 
} 
 
.pvt-messages-box-item:nth-child(odd) { 
 
    background-color: green; 
 
} 
 
.pvt-messages-box-item:nth-child(even) { 
 
    background-color: white; 
 
}

<div class="pvt-msg-panel"> 
 
    <section id="pvt-messages-box"> 
 
    <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 1</span> 
 
    <br> 
 
    <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 2</span> 
 
    <br> 
 
    <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 3</span> 
 
    <br> 
 
    </section> 
 
</div>

Answer 1

first-child चयनकर्ता का उपयोग करते समय, br टैग even चयनकर्ता को चुनने का प्रयास करेंगे। nth-of-type चयनकर्ता का उपयोग करने का प्रयास करें और वहां आप जाओ!

इसे देखें और मुझे अपनी प्रतिक्रिया दें। धन्यवाद!

.pvt-msg-panel{ 
 
    height: 92vh; 
 
    float: left; 
 
    margin-top: -20px; 
 
} 
 
#pvt-messages-box{ 
 
    height: 50vh; 
 
    width: 650px; 
 
    margin-top: 10px; 
 
    margin-left: 10px; 
 
    overflow-y: scroll; 
 
} 
 
.pvt-messages-box-item{ 
 
    padding:10px; 
 
    padding-left: 20px; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    color: black; 
 
    padding-left: 20px; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 
} 
 

 
.pvt-messages-box-item:nth-of-type(odd){ 
 
    background-color: green; 
 
} 
 
.pvt-messages-box-item:nth-of-type(even){ 
 
    background-color: white; 
 
}

<div class="pvt-msg-panel"> 
 
    <section id="pvt-messages-box"> 
 
     <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 1</span><br> 
 
     <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 2</span><br> 
 
     <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 3</span><br> 
 
    </section> 
 
</div>

Answer 2

यहाँ आप jsfiddle है। के लिए span

.pvt-messages-box-item:nth-of-type(odd){ 
    background-color: green; 
} 

.pvt-messages-box-item:nth-of-type(even){ 
    background-color: white; 
} 

nth-of-type(odd) का उपयोग करें: यदि तत्व उसकी पेरेंट निर्दिष्ट बच्चा है n वें वाले बच्चे मेल खाता है। Div के अंदर
तत्व अजीब और यहां तक ​​कि आपके चयनकर्ताओं का हिस्सा असफल हो रहा है क्योंकि यह दोनों अपने माता-पिता के अजीब बच्चों (प्रथम और तीसरे) को फैलाता है।

Answer 3

ठीक मैं आपकी समस्या को पाया।

सबसे पहले मैं अपने जेट मस्तिष्क में अपना कोड कॉपी करता हूं और उस तरह दिखता हूं .ok?

background-color: red; 

और पृष्ठभूमि पूरी तरह से लाल हो जाते हैं:

अगर मैं इस तरह के कोड बदल जाते हैं। तो समस्या यहाँ है, क्यों?

पहला पहला बच्चा खंड का निष्पादन span.pvt-message-box-item नहीं है: nth-child (1) लेकिन व्हाइटस्पेस और दूसरा ऐसा तत्व है। तीसरा वही है जो पहले अवधि तत्व और दूसरे तत्व के बीच सफेद जगह है, अब अगर आप पृष्ठभूमि रंग को बदलना चाहते हैं तो वैकल्पिक रूप से आपने इस तरह के रिज़ॉल्यूशन का उपयोग किया है। सीएसएस अजीब और यहां तक ​​कि यहां तक ​​कि 1/3/5 के साथ अजीब और जगह की तरह वास्तविक संख्या के साथ बदलें, और परिणाम आपके अनुरोध के साथ ठीक प्रतीत होता है: