Thay đổi màu nền của các phần tử thay thế css

Question

Tôi muốn thay đổi màu của các phần tử thay thế, nhưng mã của tôi không hoạt động. Mã của tôi thay đổi màu của toàn bộ phần tử vùng chứa.

Bất kỳ ai có thể vui lòng cho tôi biết tôi đang nhầm lẫn mã nào ở đâu?

.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

Khi sử dụng bộ chọn first-child, các thẻ br sẽ cố gắng chọn bộ chọn even. Hãy thử sử dụng bộ chọn nth-of-type và ở đó bạn đi!

Kiểm tra điều này và cho tôi biết phản hồi của bạn. Cảm ơn!

.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

ở đây bạn có jsfiddle. sử dụng nth-of-type(odd) cho span

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

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

: nth-con phù hợp nếu phần tử là con cụ thể của công ty mẹ của nó. Phần tử
bên trong div đang gây ra phần lẻ và thậm chí một phần của bộ chọn của bạn thất bại vì nó làm cho cả hai nhịp con kỳ lạ (thứ nhất và thứ ba) của cha mẹ của nó.

Answer 3

OK tôi thấy vấn đề của bạn.

Trước tiên, tôi sao chép mã của bạn vào bộ não phản lực và trông giống như vậy.ok?

Nếu tôi thay đổi mã ví dụ:

background-color: red; 

và nền trở nên hoàn toàn màu đỏ. Vì vậy, vấn đề là ở đây, tại sao?

Đầu tiên ChildElement đầu tiên của phần không phải là span.pvt-message-box-item: nth-child (1) nhưng khoảng trắng và phần tử thứ hai là phần tử như vậy. Thứ ba là giống nhau, cũng là khoảng trắng giữa phần tử span đầu tiên và phần tử thứ hai, bây giờ nếu bạn muốn thay đổi màu nền, bạn sẽ sử dụng độ phân giải loại này. Thay đổi css lẻ và thậm chí với số thực tế như thay thế lẻ và thậm chí với 1/3/5 và kết quả xuất hiện ok với yêu cầu của bạn: