更改交替元素的背景颜色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>

- Krisalay

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>

- kukkuz

Answer 2

这里有一个 JSFiddle。对于 span，使用 nth-of-type(odd)

.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里面的
标签导致选择器中的奇偶部分失败，因为它将两个span标签都变成了其父元素的奇数子元素（第1和第3个）。

- Edison Biba

Answer 3

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

首先我将你的代码复制到我的JetBrain中，看起来像这样。好吗？

如果我更改这样的代码：

background-color: red;

背景变成了完全的红色。所以问题在这里，为什么呢？

首先，section的第一个childElement不是span.pvt-message-box-item:nth-child(1)，而是空格，第二个是这样的元素。第三个也是一样的，它还是第一个span元素和第二个元素之间的空格。现在，如果你想要交替改变背景颜色，你必须使用这种解决方案。将css odd和even与实际数字替换，如用1/3/5替换odd和even，结果看起来符合您的要求：

- Crabime