JSF + CSS：自定义面板组ID由UINamingContainer覆盖

Question

我有用CSS设计的html页面。有对DIV选择和SPAN元素是这样的：

 
... 

#gr-bg1 { 
    .... 
    background-color: red; 
    .... 
} 

... 

与panelGroups创造适当的它XHTML页面：

<h:panelGroup id="gr-bg1" styleClass="item1" layout="block"> 
     <h:panelGroup styleClass="item-value"> 
      <h:outputText value="#{i18n.rejections}"/> 
     </h:panelGroup> 
     <h:panelGroup styleClass="num" layout="block"> 
      <h:outputText value="#{info.rejections}"/> 
     </h:panelGroup> 
</h:panelGroup> 

和结果具有HTML：

<div id="A4405:gr-bg1" class="item1"> 
    <span class="item-value">text</span> 
    <div class="num">34534535</div> 
</div> 

什么如果css选择器正在寻找＃gr-bg1 id？

Answer 1

几个月前，我有与JSF和CSS相同的问题。我想我解决了它通过Firebug读出了html生成的tag的Id，并替换了CSS-sheet的Id。

你的情况：

#A4405:gr-bg1 { 
.... 
background-color: red; 
.... } 

不知道这是否是最好的做法，但它是一种解决方法的。

否则，你可能会阻止JSF生成自己的ID，如元素的“A4405”，由上面给出你自己的ID的元素，并使用此而不是被放置在您的div的上一级。