css - 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"  /> 

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

检查此链接以查看我的意思的视觉描述。您看到的第一张图片（目录之一）。

或者你可以做

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

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

JSF 资源库有什么用途，应该如何使用？

Answer 2

尝试使用这个 css 选择器：

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

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