Question

这是我的页面结构：

<p:panelGrid>
    <p:row>
        <p:column>
            <p:panelGrid id="innerPg_1">
        </p:column>
        <p:column>
            <p:panelGrid id="innerPg_2">
        </p:column>
    </p:row>
</p:panelGrid>

我想覆盖 ui-panelgrid-cell 类的 padding 属性，仅用于id =“innerPg_1的panelGrid “，通过制定我自己的CSS规则。我怎么能这样做？

尝试以下规则：

 #innerPg_1 .ui-panelgrid-cell {
     padding: 1px 1px !important;
}

但它不起作用。这不应该是一个错误的规则吗？生成的html部分是：

<td role="gridcell" class="ui-panelgrid-cell">
    <tabled id="formId:innerPg_1"class="ui-panelgrid ui-widget role="grid">

Answer 1

嗯，生成的html中组件的ID不是innerPg_1，而是formId:innerPg_1。

因此，在您的CSS中，您应该使用以下规则：#formId\:innerPg_1 .ui-panelgrid-cell {...}。（别忘了斜线!!）

我不确定你想要实现什么，但首先，只是尝试更改background-color，只是为了检查规则是否被覆盖

此外，使用styleClass代替id可能是更好的选择，因此您可以将其重复用于另一个panelGrid

如何为特定的p：panelGrid设置ui-panelgrid-cell padding？

1 个答案: