css - 如何覆盖特定的 .ui-panelgrid td

Question

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

根据这个:How to hide time-slots ...

我试过:

#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 - 莫哈拉

感谢您的帮助。

Answer 1

你犯了 2 个错误:

1. \3A后面必须跟一个空格。

2. .ui-panelgrid类设置在 <table> 上本身，而不是它的 child 。

所以，应该这样做:

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

使用(更简洁的 CSS 选择器)

table.nopadding td {
    padding: 0;
}

另见:

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