禁止子元素从父元素继承样式

Question

例如，<p:fileUpload>通常会显示如下内容。

它基本上在一些其他HTML元素中呈现HTML表。生成的表代码如下所示。

<table class="ui-fileupload-files">
    <tbody>
        <tr>
            <td class="ui-fileupload-preview">
                <canvas width="80" height="60"></canvas>
            </td>

            <td>Winter.jpg</td>
            <td>103.1 KB</td>

            <td class="ui-fileupload-progress">
                <div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                    <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="display: none; width: 0%;"></div>
                </div>
            </td>

            <td>
                <button class="ui-fileupload-cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
                    <span class="ui-button-icon-left ui-icon ui-icon ui-icon-close"></span>
                    <span class="ui-button-text">ui-button</span>
                </button>
            </td>
        </tr>
    </tbody>
</table>

请注意，表格单元格（以及其他样式）之间没有边框（HTML表格中的规则）。

---

如果<p:fileUpload>内显示<p:dataTable>，<p:dataTable>中的样式会自动应用于为<p:fileUpload>显示的表格，如下所示。

给定<p:dataTable>的样式会应用于<p:fileUpload>，如图所示。

此<p:fileUpload>可以通过以下XHTML代码显示。

<p:dataTable id="dataTable" var="row" value="Value"
             rows="3"
             rowIndexVar="rowIndex"
             style="width: 50%;">

    <p:column headerText="Index">
        <h:outputText value="#{rowIndex+1}"/>
    </p:column>

    <p:column headerText="Image">
        <p:graphicImage id="image"
                        library="default"
                        name="test/Sunset.jpg"
                        height="100" width="100"/>

        <p:overlayPanel for="image"
                        at="left top" my="right bottom" 
                        style="width: 500px; display: none;"
                        showCloseIcon="true" dismissable="true">

            <p:fileUpload fileLimit="1"
                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                          fileUploadListener="#{bean.listener}"/>
        </p:overlayPanel>
    </p:column>
</p:dataTable>

无论如何都可以阻止这种情况，以便<p:dataTable>的样式不会应用于<p:fileUpload>而<p:fileUpload>可以照常显示，如第一张图片所示？

Answer 1

不幸的是，如果您不希望它们使用父级的CSS，则必须手动覆盖所有这些值。