Question

我试图在一个xhtml文件中覆盖Primefaces css。是的，它覆盖它，但是......我有两个嵌套的数据列表（内部和外部），我想在外部有一个更大的字体，但不是内部的，这是问题，我不知道如何做到这一点。即使外层使用.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

谢谢！萨米

Answer 1

在新标记中包含您想要覆盖的内容，例如<h:panelGroup>并导航到您的css中的该标记，您还应该使用firebug或google插件女巫肯定会帮助您本地化您需要的内容更改。希望它有所帮助！

如何覆盖p：datalist css-class？

1 个答案: