不允許子元素繼承父元素的樣式

Question

A <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。