Question

我的所有.rRow都在元素#queryResult内。我希望每隔一行都有彩色背景。

<div id="queryResult" style="display: block;">
    <div class="rRow">
        <div class="rCell4" style="width: 144px;">Job</div>
        <div class="rCell4" style="width: 144px;">Company</div>
        <div class="rCell4" style="width: 144px;">Customer</div>
        <div class="rCell4" style="width: 144px;">Product</div>
        <div class="rCell4" style="width: 144px;">Balance
            <div id="pTotal" class="ib">207.08400</div>
        </div>
        <div class="rCell4" style="width: 144px;">INBOL Date</div>
    </div>
    <div class="rRow">
        <div class="rCell4 editMe" style="width: 144px;">46500</div>
        <div class="hideMe coID">1</div>
        <div class="rCell4 coName" style="width: 144px;">IDT</div>
        <div class="rCell4" style="width: 144px;">ai ing co</div>
        <div class="rCell4" style="width: 144px;">249.400</div>
        <div class="rCell4" style="width: 144px;">0.00000</div>
        <div class="rCell4" style="width: 144px;">06/15/2015 </div>
    </div>
    <div class="breakdown" style="padding-left: 144px;">
        <div class="bdCell">
            <div class="bdCom" title="commodity">249.400</div> 
            0.12850 
        </div>
    </div>
    <div class="clr"></div>
    <div class="rRow">
        <div class="rCell4 editMe" style="width: 144px;">46507</div>
        <div class="hideMe coID">1</div>
        <div class="rCell4 coName" style="width: 144px;">IDT</div>
        <div class="rCell4" style="width: 144px;">mgm kerry</div>
        <div class="rCell4" style="width: 144px;">272.000</div>
        <div class="rCell4" style="width: 144px;">0.00000</div>
        <div class="rCell4" style="width: 144px;">08/05/2015 </div>
    </div>
    <div class="breakdown" style="padding-left: 144px;">
        <div class="bdCell">
            <div class="bdCom" title="commodity">272.000</div> 
            0.51300 
        </div>
    </div>
    <div class="clr"></div>
</div>

和CSS

#queryResult{
    width:90%;
    border:1pt solid #888;
    border-radius:3px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    padding:10px;
    font-size:.8em;
    background:#fff;
}

.rRow{
    border-bottom:1pt solid #ccc;
    background:#fff;    
    width:100%;
    display:table-row;
}

.rRow:first-child{
    font-weight:bold;
}

.rRow:nth-child(odd){
    background:#f9f5b0;
}

.rRow:hover{
    background:#ffff00;
    cursor:pointer;
}

.rCell4{
    width:15%;
    border-right:1pt solid #ccc;
    background:#fff;
    display:table-cell;
    border-bottom:1pt solid #ccc;
    padding 1px;
}

.rRow > .rCell4:last-child{
    border-right:none;
}

.hideMe{
    display:none;
}

.clr{
    clear:both;
}


.bdCell{
    width:20%;
    float:left;
    padding:2px;
    border:1pt solid #666;
    border-radius:3px;
    margin-right:5px;
    margin-top:3px;
    background: #f2f2f2;
}

.bdCom{
    display:inline-block;
    background:#c4f5c4;
    width:50%;
}

https://jsfiddle.net/6znodevx/

Answer 1

样式.rRow:nth-child(odd){ background:#f9f5b0; }“失败”因为单元格已在（.rCell4）中定义了白色背景。如果您从background:#fff移除.rCell4，它将正常工作：

.rCell4{
    width:15%;
    border-right:1pt solid #ccc;
    /*background:#fff;*/
    display:table-cell;
    border-bottom:1pt solid #ccc;
    padding 1px;
}

您可以看到它正在处理JSFiddle

的更新

nth-child（单数）不使用CSS

1 个答案: