Zmiana koloru tła elementów zastępczych css

Question

Chcę zmienić kolor alternatywnych elementów, ale mój kod nie działa. Mój kod zmienia kolor całego elementu kontenera.

Czy ktoś może mi powiedzieć, gdzie popełniam błąd w kodzie?

.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

Podczas korzystania z selektora first-child, znaczniki br będą próbowały wybrać selektor . Spróbuj użyć selektora nth-of-type i gotowe!

Sprawdź to i daj znać swoją opinię. Dzięki!

.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

tutaj masz jsfiddle. używać nth-of-type(odd) dla span

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

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

: nth-child dopasowuje jeśli element jest podanego dzieckiem swojego rodzica. Element
wewnątrz elementu div powoduje, że nieparzysta i nawet część selektorów kończy się niepowodzeniem, ponieważ powoduje objęcie obu przedziałów nieparzystych potomków (1. i 3.) rodzica.

Answer 3

OK znalazłem problem.

Najpierw skopiuję twój kod do mojego mózgu i wygląda jak ten .ok?

Jeśli zmienię taki kod:

background-color: red; 

i tła stają się całkowicie na czerwono. Więc problem jest tutaj, dlaczego?

Pierwszy element childElement sekcji nie jest span.pvt-message-box-item: nth-child (1), ale biała spacja i druga to taki element. Trzeci jest taki sam, który jest również odstępem między pierwszym elementem zakresu a drugim elementem, teraz jeśli chcesz zmienić kolor tła, możesz użyć tego rodzaju rozdzielczości. Zmienić css parzystych i nieparzystych z rzeczywistą liczbą jak zastąpienie parzystych i nieparzystych z 1/3/5, a wynik pojawia się ok z prośbą: