css - 如何选择通过 CSS？

Question

首先我在使用<h:dataTable>，我对此没问题，但之后我需要更多功能，所以我开始使用 Primefaces 并使用它的<p:dataTable>. 一切正常，但我在表格上应用的 CSS 停止工作。然后我发现<p:dataTable>是先创建一个<div>然后在里面<div>，它是创建一个<table>。

 <div id="tcform:tclist" .......>
       <table role="grid">....</table>
 </div>

但<h:dataTable>只创建 HTML <table>。现在我想知道如何获取表的 ID，或者是否有任何解决方案可以访问该表。我也想知道为什么<h:dataTable>和<p:dataTable>彼此不同。

Answer 1

如果您想以通用方式设置表格样式，只需相应地更改 CSS 选择器。<table>of<p:dataTable>可由ui-datatable班级选择。

.ui-datatable td {
    background: pink;
}

如果您只想以特定方式设置特定表格的样式，请给它一个类名，以便您可以按类名而不是 ID 进行选择。

例如

<p:dataTable styleClass="foo">

可由 覆盖.ui-datatable.foo {}。例如

.ui-datatable.foo td {
    background: hotpink;
}