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

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，则必须手动覆盖所有这些值。