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

Question

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

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

我只在 panelGrids 中需要这种效果。之后，我需要知道如何仅在某些 panelGrids 中显示边框

Answer 1

您的 CSS 选择器过于“广泛”。他们影响所有 <tr>和 <td> .ui-panelgrid 的后代标签，包括位于 panelgrid 单元格中的表中的所有内容，作为构成数据表的表的后代。所以你必须让你的选择器更具体(阅读 mozdev 上的 css specificity)并让它们只针对特定级别。

使用例如

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

这只针对 <tr>那是一个.ui-panelgrid的孙子及其直接<td> children 。

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

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

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

另见

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