Запретить дочерние элементы для наследования стилей от родительского элемента/s

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 для родителей.