Css 不允许子元素从父元素继承样式

例如，

，通常显示如下内容

<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元素中呈现一个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>

Winter.jpg
103.1 KB
用户界面按钮

请注意，表格单元格周围没有边框（在其他样式中）（HTML表格中的规则）

---

例如，如果此

显示在

中，则

中的样式将自动应用于为

显示的表格，如下所示

如图所示，给定

的样式应用于

此

可通过以下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>

---

无论如何，是否可以防止这种情况发生，从而使

中的样式不应用于

，并且

可以像第一张图片中所示的那样正常显示？

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

正确。我不带它去。