既不是第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佩雷斯古德是快:)