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

【问题标题】：Applying CSS classes only to the parent (current) p:panelGrid仅将 CSS 类应用于父级（当前）p:panelGrid
【发布时间】：2014-08-18 18:52:32
【问题描述】：

以下<p:panelGrid> 包含另一个<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> 删除所有边框。

下面的 CSS 类，

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

删除所有<p:panelGrid>s 的边框。

我也尝试过使用普通的 CSS 类，例如，

.panelgrid-noborder {
    border: none;
}

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

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

【问题讨论】：

标签： css jsf primefaces jsf-2.2

【解决方案1】：

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

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

所以，应该这样做：

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

请注意，当未指定 <thead> 或 <tfoot> 时，浏览器会将 <tr> 元素隐式放入 <tbody>。您可以在浏览器的 HTML DOM 树检查器中看到它。

另见：

CSS tutorial

【讨论】：