css - 如何为特定的p:panelGrid设置ui-panelgrid-cell填充？

这是我的页面结构：

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

我想通过制定自己的css规则来覆盖ui-panelgrid-cell类上的padding属性，仅适用于id =“ innerPg_1”的panelGrid。
我怎样才能做到这一点？

尝试使用以下规则：

 #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">

最佳答案

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

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

我不确定您要达到什么目的，但是首先，请尝试仅更改background-color，仅检查规则是否被覆盖

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

关于css - 如何为特定的p:panelGrid设置ui-panelgrid-cell填充？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28159212/