仅将CSS类应用于父（当前）p:panelGrid

以下

包含另一个

s

<p:panelGrid columns="2" styleClass="panelgrid-noborder">
    <p:panelGrid columns="1">
        <h:outputText value="1"/>
        <h:outputText value="2"/>
    </p:panelGrid>

    <p:panelGrid columns="1">
        <h:outputText value="1"/>
        <h:outputText value="2"/>
    </p:panelGrid>
</p:panelGrid>

从所有

中删除边框

<p:panelGrid columns="2" styleClass="panelgrid-noborder">
    <p:panelGrid columns="1">
        <h:outputText value="1"/>
        <h:outputText value="2"/>
    </p:panelGrid>

    <p:panelGrid columns="1">
        <h:outputText value="1"/>
        <h:outputText value="2"/>
    </p:panelGrid>
</p:panelGrid>

我还尝试使用一个简单的CSS类，比如

.panelgrid命令{
边界：无；
}

并将其赋给

columnClasses

属性-

columnClasses=“panelgrid noborder”

，但它根本不会删除边框

---

如何从父级

删除边框，即CSS类应仅应用于指定这些类的当前

？这不应影响任何其他

s.

选择器

.panelgrid-noborder.ui-panelgrid tr

基本上意味着“匹配具有类

panelgrid noborder ui panelgrid

的元素的每个

”

<p:panelGrid columns="2" styleClass="panelgrid-noborder">
    <p:panelGrid columns="1">
        <h:outputText value="1"/>
        <h:outputText value="2"/>
    </p:panelGrid>

    <p:panelGrid columns="1">
        <h:outputText value="1"/>
        <h:outputText value="2"/>
    </p:panelGrid>
</p:panelGrid>

您只希望匹配直接子对象。为此，您需要使用一个更具体的选项，特别是选择器

E>F

因此，这应该做到：

.panelgrid-noborder.ui-panelgrid>tbody>tr，
.panelgrid-noborder.ui-panelgrid>tbody>tr>td{
边界：无；
}

请注意，当未指定

或

时，浏览器会在

中隐式放置

元素。您可以在浏览器的HTMLDOM树检查器中看到它

另见：