更改備用行字體顏色

Question

我試過TR：第n個元素......不工作

下面是我的JSP和CSS JSP從獲取Java類 2列出了包括驗證，如果列表爲空，然後顯示值 數據網格是表類

<table class="data-grid" cellpadding="0" cellspacing="0"> 
      <thead> 
       <tr> 
        <th colspan="6">Excesses to be actioned</th> 
       </tr> 
      </thead> 
      <tr class="header"> 
       <th>Excess ID</th> 
       <th>Date</th> 
       <th>Client</th> 
       <th>Product</th> 
       <th>Amount</th> 
       <th>DA</th> 
      </tr> 
      <tbody id="tbNa"> 
       <c:choose> 
        <c:when 
         test="${empty actionBean.excessList.newActiveCustomerExcessUIList}"> 
         <tr> 
          <td colspan="6" align="center"><font color="red">No 
            data available for Active Excess List</font></td> 
         </tr> 
        </c:when> 
        <c:otherwise> 
         <c:forEach 
          items="${actionBean.excessList.newActiveCustomerExcessUIList}" 
          var="customerExcess" varStatus="loop"> 
          <c:set var="clientName" value="${customerExcess.clientName}" 
           scope="page"></c:set> 
          <c:set var="ultimateParent" 
           value="${customerExcess.ultimateParent}" scope="page"></c:set> 
          <c:set var="cif" value="${customerExcess.cif}" scope="page"></c:set> 
          <c:forEach items="${customerExcess.excessList}" var="excess"> 
           <tr> 
            <td><c:out value="${excess.excessId }"></c:out></td> 
            <td><c:out value="${excess.openDate }"></c:out></td> 
            <td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out 
               value="${clientName}"></c:out></a></td> 
            <td><c:out value="${ultimateParent}"></c:out></td> 
            <td><c:out value="${excess.excessAmount }"></c:out></td> 
            <td><c:out value="${excess.excessDa}"></c:out></td> 
           </tr> 
          </c:forEach> 
         </c:forEach> 
        </c:otherwise> 
       </c:choose> 
       <c:choose> 
        <c:when 
         test="${empty actionBean.excessList.approvedCustomerExcessUIList}"> 
         <tr> 
          <td colspan="6" align="center"><font color="red">No 
            data available for Approved Excess List</font></td> 
         </tr> 
        </c:when> 
        <c:otherwise> 
         <c:forEach 
          items="${actionBean.excessList.approvedCustomerExcessUIList}" 
          var="customerExcess"> 
          <c:set var="clientName" value="${customerExcess.clientName}" 
           scope="page"></c:set> 
          <c:set var="ultimateParent" 
           value="${customerExcess.ultimateParent}" scope="page"></c:set> 
          <c:forEach items="${customerExcess.excessList}" var="excess"> 
           <tr> 
            <td><c:out value="${excess.excessId }"></c:out></td> 
            <td><c:out value="${excess.openDate }"></c:out></td> 
            <td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out 
               value="${clientName}"></c:out></a></td> 
            <td><c:out value="${ultimateParent}"></c:out></td> 
            <td><c:out value="${excess.excessAmount }"></c:out></td> 
            <td><c:out value="${excess.excessDa }"></c:out></td> 
           </tr> 
          </c:forEach> 
         </c:forEach> 
        </c:otherwise> 
       </c:choose> 
      </tbody> 
     </table> 

數據網格表類...下面是我不想改變行color..I需要改變的字體顏色爲表 寫的CSS數據在偶數行

.data-grid { 
    margin: 0px; 
    padding: 0px; 
    width : 60%; 
    height : 40%; 
    padding-top: 10%; 
    padding-left: 15%; 
    white-space: nowrap;  
} 

.data-grid select { 
    padding: 3px 0px; 
    border: 1px solid #DCDCDC; 
} 

.data-grid td { 
    font-size: 11px; 
    color: #000000; 
    background-color: white; 
    border: 0px; 
    border-left: 1px; 
    border-bottom: 1px; 
    border-style: solid; 
    border-color: #DBE5F1; 
    padding: 5px; 
} 


.data-grid thead { 
    color: #004080; 
    font-size: 12px; 
    font-weight: normal; 
    border-color: #FFF; 
    vertical-align: text-top; 
    background-color: #C3C3C3; 
    height: 20px; 
    padding: 2px 5px; 
} 

.data-grid .header th { 
    color: #002577; 
    font-size: 11px; 
    font-weight: bold; 
    border-color: #FFF; 
    text-align: center; 
    vertical-align: text-top; 
    background-color: #D5E0E6; 
} 

Answer 1

.data-grid tr:nth-child(even) {color: #CCC} 
.data-grid tr:nth-child(odd) {color: #FFF} 

Answer 2

檢查這個例子

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.myclass1 tr:nth-child(odd) 
{ 
background:#ff0000; 
} 
.myclass1 tr:nth-child(even) 
{ 
background:#0000ff; 
} 
.myclass2 tr:nth-child(odd) 
{ 
background:#00ff00; 
} 
.myclass2 tr:nth-child(even) 
{ 
background:#ff0000; 
} 
</style> 
</head> 
<body> 

<table width="100%" border=1 class="myclass1"> 

<tr><td>aaaa</td></tr> 
<tr><td>bbbb</td></tr> 
<tr><td>cccc</td></tr> 
<tr><td>dddd</td></tr> 

</table> 

<table width="100%" border=1 class="myclass2"> 

<tr><td>aaaa</td></tr> 
<tr><td>bbbb</td></tr> 
<tr><td>cccc</td></tr> 
<tr><td>dddd</td></tr> 

</table> 

</body> 
</html>