如何覆蓋Primefaces <p：datalist的css-class？

我想在一個xhtml文件中覆蓋Primefaces css。是的，它覆蓋了它，但是...我有兩個嵌套數據列表（內部和外部），我想在外部有更大的字體，但不是內部的，這是問題，我不知道如何做到這一點。即使外層使用.ui-datalist-itemWithBiggerFont，它仍然使用li class =「ui-datalist-item」。如何覆蓋Primefaces <p：datalist的css-class？

 .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

謝謝！ Sami

來源

2012-05-18 Sami

在你的CSS中使用'！important'。 – Fallup

它沒有幫助，因爲它已經覆蓋了，因爲我命名爲Primefaces類的css類。問題是，儘管我的div CSS類是使用相同的li-class，但我認爲:)感謝您的幫助！ – Sami

把你想要重寫的東西換成新的標籤，例如<h:panelGroup>，然後導航到你的CSS中的標籤，你也應該使用firebug或谷歌插件女巫肯定會幫助你本地化你需要改變的東西。希望能幫助到你！

來源

2012-05-18 22:14:31

如何覆蓋Primefaces <p：datalist的css-class？

回答

相關問題