Как переопределить Primefaces <p: datalist's css-class?

Question

Я пытаюсь переопределить Primefaces css в одном xhtml-файле. Да, это переопределяет это, но... У меня есть два вложенных списка данных (внутренний и внешний), и я хотел бы иметь больший шрифт во внешнем, но не во внутреннем, это проблема, я не знаю, как сделай это. Он по-прежнему использует li class="ui-datalist-item", даже если внешний уровень использует.ui-datalist-itemWithBiggerFont.

       .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

Спасибо! Сами

Answer 1

Оберните то, что вы хотите переопределить в новом теге, например, <h:panelGroup> и перейдите к этому тегу в вашем CSS, вы также должны использовать Firebug или Google плагин ведьма наверняка поможет вам локализовать то, что вам нужно изменить. Надеюсь, поможет!