Question

以下<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>

举个例子，我只需要从父/外（大多数）<p:panelGrid>删除所有边框。

以下CSS类

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

从所有<p:panelGrid>中删除边框。

我也尝试使用像

这样的纯CSS类

.panelgrid-noborder {
    border: none;
}

并将其提供给columnClasses属性 - columnClasses="panelgrid-noborder"，但它根本不会删除边框。

如何从父<p:panelGrid>中删除边框，即CSS类只应应用于指定了这些类的当前<p:panelGrid>？这不应该影响任何其他<p:panelGrid>。

Answer 1

选择器.panelgrid-noborder.ui-panelgrid tr基本上意味着“匹配每个 <tr>具有类panelgrid-noborder ui-panelgrid”的元素。

您只想匹配直接孩子。您需要使用更具体的selector，特别是child combinator选择器E > F。

所以，这应该做：

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

请注意，如果未指定<tr>或<tbody>，则浏览器会在<thead>内隐式添加<tfoot>个元素。您可以在浏览器的HTML DOM树检查器中看到它。

另见：

CSS tutorial

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

1 个答案:

另见：