更改备用元素 css 的背景颜色答案

【问题标题】：Change the background-color of alternate elements css更改备用元素 css 的背景颜色
【发布时间】：2019-03-30 23:00:46
【问题描述】：

我想更改备用元素的颜色，但我的代码不起作用。我的代码改变了整个容器元素的颜色。

谁能告诉我代码哪里出错了？

.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>

【问题讨论】：

标签： html css css-selectors css-float

【解决方案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>

【讨论】：

【解决方案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;
}

:nth-child 如果元素是其父元素的指定子元素，则匹配。 div 中的
元素会导致选择器的奇数和偶数部分失败，因为它会同时跨越其父元素的奇数子元素（第一个和第三个）。

【讨论】：

【解决方案3】：

好的，我找到了你的问题。

首先我将你的代码复制到我的喷气式大脑中，看起来像那样。好吗？

如果我更改此类代码：

background-color: red;

背景变成完全红色。那么问题来了，为什么？

首先，section 的第一个 childElement 不是 span.pvt-message-box-item:nth-child(1) 而是空格，第二个是这样的元素。第三个是相同的，它也是第一个跨度元素和第二个元素之间的空白，现在如果你想改变背景颜色，你可以使用这种分辨率。用实际数字更改 CSS 奇数和偶数，例如用 1/3/5 替换奇数和偶数，结果显示符合您的要求：

【讨论】：