JSF+；CSS:自定义panelGroup id被UINamingContainer覆盖

我有一个用css设计的html页面。DIV和SPAN元素有如下选择器：

... #gr-bg1 { .... background-color: red; .... } ... ... #gr-bg1{ .... 背景色：红色； .... } ... 并使用panelGroups创建适当的it 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>

文本
34534535

---

如果css选择器正在查找#gr-bg1 id，该怎么办

几个月前，我对

JSF

和

CSS

也有同样的问题。我想我解决了这个问题，通过Firebug读取html生成的

标签的Id，并替换
CSS表的
Id

就你而言：

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

我不知道这是否是最佳实践，但这是一种变通方法

否则，您可以通过将元素置于自己的Id之上并使用它来防止JSF生成自己的Id，例如元素的“A4405”被放置在div之上一个级别。
我曾尝试通过其他
panelGroup
使用自己的
Id
来包装此元素，但是这个新的父元素具有相同的前缀“A4405”添加到
ID
。也许每个家长都必须有自己的
ID
。否则，jsf框架会为您生成一个
id
。你试过给每位家长一个用户定义的
id
？是的，我试过了。但是这个父元素只有
h:view
元素作为它的父元素。我无法为此设置
id
。很抱歉，几个月前我试图找到我的解决方案，但找不到任何东西。我想我使用了上面的解决方案。我很抱歉。