primefacesをオーバーライドする3.1 cssをデータテーブルにする

Question

primefaces 3.1からCSSクラスをオーバーライドしようとしていますが、クラス名のパターンをオーバーライドしていました。

.ui-datatable table {} 
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer {} 
.ui-datatable .ui-datatable-header {} 
.ui-datatable th,.ui-datatable tfoot td {} 
.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{} 

をしかし、唯一の行の内容は、集中得たが、ヘッダBGCOLORや他のものを変更することができませんでした。私が試した 。 それから、私が上書きしたクラスが使用されていない可能性があることに気付きました。 は驚くべきことに、私は誰かがどのように私は、テーブルのヘッダー、ボーダー、代替行の色を変更できるように教えてもらえます

<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget"> 
<table role="grid"><thead><tr role="row"> 
    <th id="form:j_id1915418705_722af8cd:j_id1915418705_722af894" class="ui-state-default" role="columnheader"> 
     <div class="ui-dt-c"> 
      <span><span class="outputText">Model</span></span> 
     </div> 
    </th> 
    <th id="form:j_id1915418705_722af8cd:j_id1915418705_722af942" class="ui-state-default" role="columnheader"> 
     <div class="ui-dt-c"> 
      <span><span class="outputText">Color</span></span> 
     </div> 
    </th></tr></thead><tfoot></tfoot> 

    <tbody id="form:j_id1915418705_722af8cd_data" class="ui-datatable-data ui-widget-content"> 
     <tr data-ri="0" data-rk="BMW" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false"> 
      <td role="gridcell"> 
       <div class="ui-dt-c"> 
        <span class="outputText">BMW</span> 
       </div> 
      </td> 
      <td role="gridcell"> 
       <div class="ui-dt-c"> 
        <span class="outputText">Black</span> 
       </div> 
      </td> 
     </tr> 
     <tr data-ri="1" data-rk="Audi" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false"> 
      <td role="gridcell"> 
       <div class="ui-dt-c"> 
        <span class="outputText">Audi</span> 
       </div> 
      </td> 
      <td role="gridcell"> 
       <div class="ui-dt-c"> 
        <span class="outputText">White</span> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table><input type="hidden" id="form:j_id1915418705_722af8cd_selection" name="form:j_id1915418705_722af8cd_selection" value="" autocomplete="off" /> 

...クラスとしてこれらを使用していない生成されたソースコードを発見しました。.. PFのどのクラスが生成されたソースコードを見直すべきかを知る方法のパターンを誰かから教えてもらえますか？

ありがとうございます。

Answer 1

クラスの最初には、マークアップにここに含まれています：

<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget"> 

他の子クラスは、自動的に他の要素に自分自身を適用します。

ヘッドからリンクされた別々のCSSファイルにこれらのスタイルを含める場合、カスタムCSSは実際にはプライムスCSSスタイルによってオーバーライドされることがあります。

カスタムCSSがページに自分自身を適用するようにするには、カスタムCSSをページ本文にインラインで追加して、それが当てはまるかどうかを確認してください。