Question

如何覆盖样式表中的特定<p:panelGrid>？

我试过了：

#frm_dash\3Adisplay td.ui-panelgrid {
    padding:0px 0px;
}

和

#frm_dash\3Adisplay .ui-panelgrid td {
    padding:0px 0px;
}

但似乎没有用。

该页面是以这种物理结构构建的：

<h:form id="frm_dash">
    [...]
    <p:panelGrid id="pnlg_page" style="width: 100%;">
        [...]
        <p:row>
            <p:column style="width: 50%; vertical-align: top" colspan="1">

                <p:panelGrid id="display" columns="2"> 
                    [...]
                </p:panelGrid> 

            </p:column>

            <p:column colspan="1" style="vertical-align: top;">
                [...]                                       
            </p:column>
        </p:row>
        [...]
    </p:panelGrid>
    [...]
</h:form>

Primefaces 3.4.1。 - Tomcat 7.x - Mojarra

感谢您的帮助。

Answer 1

你犯了两个错误：

\3A后面必须有一个空格。
.ui-panelgrid类已在<table>本身上设置，而不是在其子级上。

所以，这应该做：

#frm_dash\3A display.ui-panelgrid td {
    padding: 0;
}

或者就是这样，因为在已经被ID选择的元素上使用类名选择器是没有意义的，该ID本身应该是唯一的：

#frm_dash\3A display td {
    padding: 0;
}

作为另一种选择，给面板网格一个样式类，以便您可以在其他元素上重复使用相同的外观：

<p:panelGrid id="display" columns="2" styleClass="nopadding">

with（一个更干净的CSS选择器）

table.nopadding td {
    padding: 0;
}

另见：

How to use JSF generated HTML element ID with colon ":" in CSS selectors?

Answer 2

只需添加一个css代码

.ui-panelgrid .ui-panelgrid-cell{
   padding 0px;
 }

此代码如果您导入页面kill primefaces css

如何覆盖特定<p：panelgrid> </p：panelgrid>的.ui-panelgrid td

2 个答案:

另见：