从所有 PrimeFaces p:panelGrid 组件中移除边框答案

【问题标题】：Remove border from all PrimeFaces p:panelGrid components从所有 PrimeFaces p:panelGrid 组件中移除边框
【发布时间】：2013-09-24 17:08:14
【问题描述】：

我需要使用 primefaces 隐藏所有面板网格的所有边框。我试过他没有效果：

table {
    border: none;
}

table tr, table td {
    border: none;
}

我能做什么？

【问题讨论】：

【解决方案1】：

您需要至少与 PrimeFaces 默认选择器一样具体。

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

除非您需要覆盖 HTML 元素上的硬编码 style，否则请勿使用 !important。

【讨论】：

对不起，我删除了我的评论，因为 !important 解决了这个问题。我不知道在 primefaces 5.1 中我需要做什么。你的答案是对的
!important 标志是一种解决方法，而不是解决方案。正确的解决方案是相应地更改 CSS 选择器以适应 PrimeFaces 5.1 默认 CSS 中的更改。有关详细信息，另请参阅答案中的第一个链接。
是的，我知道。几个月前我从你那里学到的。这只是一个临时解决方案
这在 primefaces 5.1 中也删除了数据表单元格的边框。我只需要在 panelGrid 组件中进行此修复
我使用的是 PrimeFaces 5.2，但这对我不起作用。我改用 forum.primefaces.org/viewtopic.php?f=23&t=42334 的代码

【解决方案2】：

此解决方案仅影响 panelGrids，但影响 dataTables：

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

【讨论】：

【解决方案3】：

您的 CSS 可能在其他地方被覆盖。您可以尝试使用!important 规则。

table, table tr, table td {
   border: none !important;
}

【讨论】：

好的，你是对的，但我不明白如果我将 style.css 文件包含在正文中，为什么会发生这种情况
还有其他样式表吗？还是内联样式？也可能是 style.css 中的另一条规则更具体，因此在上述规则之前适用。
不，没有。我将表格样式放在我的 css 文件的顶部，我的项目中没有另一个 css 文件
!important 不是解决方案。这是一种解决方法。继续阅读CSS specificity, inheritance and cascading rules。 !important 仅应该在您想要覆盖在 HTML 元素的 style 属性中硬编码的样式时使用。这不是这里的情况。

【解决方案4】：

在 primefaces 5.1 上测试

.ui-widget-content {
border: none;
}

【讨论】：

【解决方案5】：

Primefaces 5 中的这项工作

.ui-panelgrid-content {
    border: none;
}

【讨论】：