.class:nth-​​child(偶数)不工作？

Question

我有一个问题nth-child,任何想法都错了吗？

HTML:

    <div class="comment">
        <div class="header">
            <div class="by">Euismod nam.</div>
        </div>
        <div class="content">
...
        </div>
        <div class="date">12-15-23</div>
    </div>
    <div class="comment">
        <div class="header">
            <div class="by">Euismod nam.</div>
        </div>
        <div class="content">
...
        </div>
        <div class="date">12-15-23</div>
    </div>

CSS:

/*--*/
.comment {
    width:600px;
    overflow:auto;
    margin:0;
    margin-top:5px;
    padding:0;
    border:solid 1px #CCC;  
    /*border-top:none;*/
}
.comment .header {
    margin:0;
    padding:1px 2px;
    overflow:auto;
    background:#B2A98A;
    color:#FFF;
}
.comment .header:nth-child(even) {
    background:#62798B;
}
.comment .header .by {
    float:right;
    z-index:90;
}
.comment .content {
    margin:0;
    padding:5px 2px;
    overflow:auto;
    background:#FeFeFe;
    color:#000;
}
.comment .date {
    margin:0;
    padding:1px 2px;
    overflow:auto;
    background:rgba(178,169,138,0.5);
    color:#FFF;
}
.comment .date:nth-child(even) {
    background:rgba(98,121,139,0.5);
}

我在代码中没有看到问题,或者我错过了什么？[的jsfiddle]

Answer 1

.header只有一个孩子.comment,你应该选择父母:

.comment:nth-child(even) .header {
    background:#62798B;
}

http://jsfiddle.net/Qn49d/1/