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

Question

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

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

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

Answer 1

你的 CSS 选择器是“广泛的”。它们影响作为 a 的后代的所有 <tr>和<td>标记.ui-panelgrid，包括作为构成数据表的表的后代的 panelgrid 单元格中的表中的所有内容。所以你必须使你的选择器更具体（阅读关于 mozdev 的 css 特异性）并让它们只针对某个级别。

使用例如

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

这仅针对<tr>作为 a 的孙子.ui-panelgrid及其直系<td>子代的 's。

如果您不希望将其应用于所有面板网格，则必须使用@BhavinPanchani 在上面的评论中提到的 styleClass。但是不是通过使用类来显式添加边框，而是阻止应用上面的 css。

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

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

也可以看看

• 我可以编写一个 CSS 选择器来选择没有特定类的元素吗？