更改備用元素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 。 使用nth-of-type(odd)表示span

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

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

：如果元素是其父元素的指定子元素，則第n個子元素匹配。 該
div中的元素導致選擇器的奇數和偶數部分失敗，因為它使兩個跨越其父級的奇數子（第1和第3）。

Answer 3

好的我發現了你的問題。

首先，我將你的代碼復制到我的噴氣機大腦，看起來像那樣。

如果我改變這樣的代碼：

background-color: red;

並且背景變得完全紅。 問題在這里，為什么？

首先，section的第一個childElement不是span.pvt-message-box-item：nth-​​child（1）但是空格，第二個是這樣的元素。 第三個是同樣的，它也是第一個span元素和第二個元素之間的空白，現在如果你想改變背景顏色，你也可以使用這種分辨率。 改變css奇數和偶數與實際數字，如替換奇數和偶數與1/3/5，結果似乎沒有你的請求：