css - 将 CSS 应用于特定的 p:dataTable 组件而不是所有 p:dataTable 组件

Question

我在申请表上有多个数据表。我想删除除一个之外的所有数据表的边框。我使用下面的样式来删除边框。能否请您告诉我如何才能获得只有一个带边框的数据表。截至目前，它删除了所有数据表的边框。

.ui-datatable .ui-datatable-data td, .ui-datatable .ui-datatable-data-empty td {
  border-style: none;
}

Answer 1

给有问题的表一个特定的样式类：

<p:dataTable ... styleClass="borderless">

这样您就可以为此使用更具体的 CSS 选择器：

.ui-datatable.borderless .ui-datatable-data tr,
.ui-datatable.borderless .ui-datatable-data-empty tr,
.ui-datatable.borderless .ui-datatable-data td,
.ui-datatable.borderless .ui-datatable-data-empty td {
    border-style: none;
}

（请注意，我也将选择器扩展为覆盖tr；默认情况下它还有一个边框，您的初始选择器仅删除列之间的垂直边框，而不是行之间的水平边框）

也可以看看：

• 如何使用自定义样式覆盖默认的 PrimeFaces CSS？