Div標籤之間的備用背景顏色

我想交替僅divLabels的背景顏色。

表的每個divrow都有一個divlabel和一個divdata元素。

這是我到目前爲止已經試過： -

不幸的是，標籤的顏色不備用，而不是顯示僅奇數行中提到的相同的顏色： -

.About_RowLabel:nth-of-type(odd) { 
    background-color: #DEF3CA; 
}

誰能告訴我爲什麼這不適合我的div元素？

來源

2014-12-10 Philo

你沒有選擇正確的孩子：一個級別拉昇至他們的父母，並從那裏開始，像.someParentClass:nth-of-type(even) .child{}：demo

.About_Row { 
 
    height: 2em; 
 
    width: 500px; 
 
    /*float:left;*/ 
 
} 
 
.About_RowLabel { 
 
    width: 98px; 
 
    color: black; 
 
    float: left; 
 
    background-color: #71cd7b; 
 
} 
 
.About_RowData { 
 
    width: 200px; 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 
.About_Row:nth-of-type(odd) .About_RowLabel { 
 
    background-color: #DEF3CA; 
 
} 
 
.serv_resize { 
 
    border: 1px solid #E2E2E2; 
 
    color: #444; 
 
    width: 425px; 
 
    float: left; 
 
    margin: 10px 10px 10px 0; 
 
    padding: 5px; 
 
    height: 239px; 
 
}

<div id="you" class="serv_resize"> 
 
    <div class="About_Row"> 
 
    <div class="About_RowLabel"> 
 
     BirthDate: 
 
    </div> 
 
    <div class="About_RowData"> 
 
     <asp:Label ID="lblDoB" runat="server" Text="DoB"></asp:Label> 
 
    </div> 
 
    </div> 
 
    <div class="About_Row"> 
 
    <div class="About_RowLabel"> 
 
     As of: 
 
    </div> 
 
    <div class="About_RowData"> 
 
     <asp:Label ID="lblAsOf" runat="server" Text="Dt"></asp:Label> 
 
    </div> 
 
    </div> 
 
    <div class="About_Row"> 
 
    <div class="About_RowLabel"> 
 
     Phone: 
 
    </div> 
 
    <div class="About_RowData"> 
 
     <asp:Label ID="lblPhone" runat="server" Text="Ph"></asp:Label> 
 
    </div> 
 
    </div> 
 
</div>

來源

2014-12-10 23:53:32 RGLSV

所有nth-僞選擇工作與兄弟元素。也就是說，共享同一個父親的元素。

您的所有.About_RowLabel是他們父母的第一個（.About_Row元素），所以他們都是奇怪的。

目標交替父母

.About_Row:nth-of-type(odd) .About_RowLabel { 
    background-color: #DEF3CA; 
}

演示在http://jsfiddle.net/o5dv4qkc/4/

來源

2014-12-10 23:57:55

Div標籤之間的備用背景顏色

回答

相關問題