0

1 つの xhtml ファイルで Primefaces css をオーバーライドしようとしています。はい、それをオーバーライドしていますが... 2 つの入れ子になったデータリスト (内部と外部) があり、外側のデータリストを大きくしたいのですが、内側のフォントを大きくしたくありません。それが問題です。方法がわかりません。やれ。外部レベルが .ui-datalist-itemWithBiggerFont を使用している場合でも、まだ li class="ui-datalist-item" を使用しています。

.ui-datalist-item{
    background: none;
    font-family: cursive;
    border: none;
    background-image: none;
}

.ui-datalist-itemWithBiggerFont{
    background: none;
    font-family: cursive;
    border: none;
    background-image: none;
    font-size: larger;  
}

#outer li{
   font-size: larger;    
}

xhtml で:

<h:outputStylesheet library="css" name="menu.css"  /> 
            <p:dataList id="outer" value="#{controller.selected.menuMenuId.courseCollection}"  var="course" itemType="course" type="ordered" styleClass=".ui-datalist-itemWithBiggerFont">  
                #{course.heading}, #{course.courseId}

                <p:dataList id="inner" value="#{course.dishCollection}" var="dish" itemType="dish" styleClass=".ui-datalist-item">
                    #{dish.name}
                </p:dataList>    
            </p:dataList>

そしてhtmlのソースコード：

<div id="outer" class="ui-datalist ui-widget .ui-datalist-itemWithBiggerFont"><div id="j_idt90_content" class="ui-datalist-content ui-widget-content"><ol id="j_idt90_list" class="ui-datalist-data" type="course"><li class="ui-datalist-item">  
                outer, 1

                <div id="outer:0:inner" class="ui-datalist ui-widget .ui-datalist-item"><div id="j_idt90:0:j_idt92_content" class="ui-datalist-content ui-widget-content"><ul id="j_idt90:0:j_idt92_list" class="ui-datalist-data" type="dish"><li class="ui-datalist-item">
                   inner1
                </li><li class="ui-datalist-item">
                    inner2

ありがとう！サーミ語

4

1 に答える 1

0

たとえば、オーバーライドしたいものを新しいタグでラップ<h:panelGroup> し、css でそのタグに移動します。変更が必要なものをローカライズするのに役立つように、firebug または Google プラグイン ウィッチも使用する必要があります。それが役に立てば幸い！

于 2012-05-18T22:14:31.613 に答える