Question

我有以下标记：

<div class="chat-area">
  <div class="username-area">
  </div>
  <div class="message-area">
  </div>
  <div class="options-area">
  </div>
</div>
<div class="chat-area">
  <div class="username-area">
  </div>
  <div class="message-area">
  </div>
  <div class="options-area">
  </div>
</div>

我正在尝试在username-area和#00A6FF之间替换#27FF00的背景颜色。在我的CSS中，我有：

.chat-area .username-area:nth-child(odd){
  background-color: #00A6FF;
}

.chat-area .username-area:nth-child(even){
  background-color: #27FF00;
}

但是所有username-area div都设置为#00A6FF。我尝试使用:nth-of-type，我也尝试使用表达式（2n+1和2n+2）而不是'奇数'和'偶数'，但我没有运气搞清楚这一点。我想看看这个网站上的几个问题，但我认为解决方案没有帮助或似乎解决了不适用于我的代码的问题。

Answer 1

就这样：

   .chat-area:nth-child(odd) .username-area{
      background-color: #00A6FF;
    }

    .chat-area:nth-child(even) .username-area{
      background-color: #27FF00;
    }

@MarcosPérezGude更快：）

Answer 2

转到ommelete：）

.chat-area:nth-child(odd) .username-area{
  background-color: #00A6FF;
}

.chat-area:nth-child(even) .username-area{
  background-color: #27FF00;
}

这是因为奇数和偶数元素是.chat-area，而不是username-area。

既不是n-child也不是nth-type

2 个答案: