删除不在数据表上的所有面板网格上的所有边框

Question

我需要使用 primefaces 隐藏所有 panelGrids 的所有边框。以下代码也删除了所有 panelGrids 和 dataTables 的边框（primefaces 5+）：

.ui-panelgrid tr, .ui-panelgrid td {
    border: none;
}

我只在 panelGrids 中需要这个效果。在那之后，我需要知道如何只在某些 panelGrids

中显示边框

Answer 1

您的 CSS 选择器将 'broad'。它们影响作为 .ui-panelgrid 后代的 all <tr> 和 <td> 标签，包括 table 中的所有标签在中作为构成数据table 的table 的后代的panelgrid 单元格。所以你必须让你的选择器更具体（阅读 mozdev 上的 css specificity）并让它们 只针对某个级别 。

使用例如

.ui-panelgrid > * > tr, .ui-panelgrid > * > tr > td.ui-panelgrid-cell {
     border: none;
}

这仅针对 .ui-panelgrid 的孙子 <tr> 及其直接 <td> 子孙。

如果您不想将此应用到所有 panelgrids，您将必须使用@BhavinPanchani 在上面的评论中提到的 styleClass。但不是使用 class 显式添加边框，而是阻止应用上面的 css。

.ui-panelgrid:not(.keepBorder) > * > tr, .ui-panelgrid:not(.keepBorder) > * > tr > td.ui-panelgrid-cell {
     border: none;
}

只需将 keepBorder class 添加到要保留边框的 panelGrids。最后这件事我没有测试，但是稍微测试一下你；

另见

Can I write a CSS selector selecting elements NOT having a certain class?

删除不在数据表上的所有面板网格上的所有边框

Remove all border on all panelgrids not on datatables

css

primefaces

border

panelgrid