css - 如何从特定 PrimeFaces p :panelGrid? 中删除边框

Question

我很难从特定的 PrimeFaces 中删除边框 <p:panelGrid> .

<p:panelGrid styleClass="companyHeaderGrid">
    <p:row>
        <p:column>
            Some tags
        </p:column>
        <p:column>
            Some tags
        </p:column>
    </p:row>
</p:panelGrid>

我已经能够使用以下方法从单元格中删除边框:

.companyHeaderGrid td {
    border: none;
}

但是

.companyHeaderGrid {
    border: none;
}

不起作用。

Answer 1

边框设置在生成的 tr 和 td 元素上，而不是在 table 上。所以，应该这样做:

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

我是怎么找到它的？只需在 Chrome 的 Web 开发工具集中检查生成的 HTML 输出和所有 CSS 样式规则(右键单击，Inspect Element 或按 F12)。 Firebug 和 IE9 有类似的工具集。至于混淆，请记住 JSF/Facelets 最终生成 HTML，而 CSS 仅适用于 HTML 标记，而不适用于 JSF 源代码。因此，要应用/微调 CSS，您需要查看客户端(网络浏览器)。

另见:

• How do I override default PrimeFaces CSS with custom styles?
• Remove border from all PrimeFaces p:panelGrid components

---

如果您仍在使用 PrimeFaces 4 或更早版本，请改用以下代码:

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