既不是第n个孩子，也没有第n-的型

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> 

我试图交替#00A6FF和#27FF00之间的username-area的背景颜色。在我的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

只要给一转的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。

Answer 2

只是让一个：

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

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

@Marcos佩雷斯古德是快:)