我想更改替代元素的颜色,但我的代码不起作用。我的代码改变了整个容器元素的颜色。
谁能告诉我代码哪里出错了?
.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>
最佳答案
当使用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>
关于html - 更改备用元素 css 的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39052549/