CSS不适用于表行

Question

我试图制作具有不同颜色的奇数和偶数行。这是我的代码：

 <h:head>
    <h:outputStylesheet library="css" name="styles.css"  /> 
    <title>Facelet Title</title>
</h:head>
<h:body>
    <h:form>
        <h:dataTable   id="accountsTable" value="#{currentCustomer.accounts}" var="accounts" styleClass="accountsTable" headerClass="accountsTableHeader" rowClasses="accountsTableOddRow,accountsTableEvenRow" >
            <h:column>
                <f:facet name="header">Account Number</f:facet>
                    #{accounts.accountNumber}
            </h:column>
            <h:column>
                <f:facet name="header">Currency</f:facet>
                    #{accounts.accountCurrency}
            </h:column>
            <h:column>
                <f:facet name="header">IBAN</f:facet>
                    #{accounts.iban}
            </h:column>
            <h:column>
                <f:facet name="header">Account Number</f:facet>
                    #{accounts.accountNumber}
            </h:column>
        </h:dataTable>
    </h:form>
</h:body>

和css文件：

root { 
    display: block;
}


.accountsTable{   
  border-collapse:collapse;
   border:1px solid #000000;
   background-color: red;
}

.accountsTableHeader{
       background:none repeat scroll 0 0 #B5B5B5;
   border-bottom:1px solid #000000;  
   padding:2px;
}

.accountsTableOddRow{
   text-align:center;
  background:none repeat scroll 0 0 #FFFFFFF;   
}

.accountsTableEvenRow{
   text-align:center;
   background:none repeat scroll 0 0 #D3D3D3;
}

我的文件组织：

但所有行仍然是白色的。任何人都可以帮我这个吗？

由于

Answer 1

如果你想使用

<h:outputStylesheet library="css" name="styles.css"  /> 

您需要执行以下操作。在resources下创建一个名为Web Pages的文件夹，并将文件夹css放入其中。您的样式未被应用，因为它正在查找resources文件夹的该文件夹（css）。

Check this link有点看到我的意思的视觉描述。你看到的第一张照片（目录一）。

或者你可以做

<h:outputStylesheet name="/css/styles.css"  /> 

另请查看此链接以了解应如何真正使用库。

What is the JSF resource library for and how should it be used?

Answer 2

尝试使用此css选择器：

tr:nth-child(even) {
   text-align:center;
   background:#D3D3D3;

}
tr:nth-child(odd) {
   text-align:center;
    background:#FFFFFFF;
}