将 styleClass 应用于父 panelGrid 元素而不是子元素

Question

我正在尝试将 styleClass 应用于 h:panelGrid 而不将其应用于其子代：

<h:panelGrid id="mainPanelGrid" columns="2" width="100%" styleClass="topAligned" >
    <p:fieldset id="fs1" legend="fs1" style="width: max-content">  
        <h:panelGrid columns="3">
            <p:outputLabel for="id1" value="#{messages.label_application}" />
            <p:selectOneMenu id="id1" required="true" value="som">
                <f:selectItem itemLabel="#{messages.label_select}" noSelectionOption="true" />  
                <f:selectItems value="#{bean.availableItems}" />
            </p:selectOneMenu>
            <p:message for="id1" />
        </h:panelGrid>             
    </p:fieldset>  

     <p:fieldset id="fs2" legend="fs2" style="width: max-content">  
         <h:panelGrid columns="3">
             <!--more fields-->     
         </h:panelGrid>  
     </p:fieldset>
</h:panelGrid>

我的 topAligned css：

.topAligned td{
    vertical-align: top !important;
}

问题是我需要将两个字段集顶部对齐，这与我申请的styleClass 效果很好，但它也将这个styleClass 应用于所有孩子。因此，两个字段集的所有字段（outputLabel、selectOneMenu 等...）也都顶部对齐...

我尝试了所有不同的方法来指定 this question 的顶部对齐方式，但没有成功...我还尝试查看 html 源代码，但它与所有 jsf 和 primefaces 的东西有点混淆...

如果你知道一个可行的技巧......

Answer 1

有

.topAligned td{
    vertical-align: top !important;
}

以及 JSF 生成的 HTML 输出

<table class="topAligned">
    ...
</table>

您基本上将样式应用于<table> 的每一个 <td> 元素，以及嵌套<table>s 的元素。

如果您只想将样式应用于父 <table> 的直接 <td> 元素，那么您应该改用 columnClasses 属性：

<h:panelGrid ... columnClasses="topAligned,topAligned">

与

.topAligned {
    vertical-align: top;
}

这将在生成的 HTML 输出中结束，如下所示：

<table>
    <tbody>
        <tr>
            <td class="topAligned">...</td>
            <td class="topAligned">...</td>
        </tr>
    </tbody>
</table>

并且不适用于嵌套<table>s 的<td>s。

请注意，我还删除了无意义的 !important 解决方法。它应该仅在您想通过外部 CSS 样式覆盖硬编码的 style 时使用。

还请注意，此问题与 JSF 无关。 JSF 在这个问题的上下文中仅仅是一个 HTML 代码生成器。在处理“plain vanilla” HTML/CSS 时，您会遇到完全相同的问题。问题更多在于缺乏对基本 HTML 和 CSS 的熟悉。在 http://htmldog.com 你可以找到不错的 HTML/CSS 教程。