css - JSF + CSS：自定义 panelGroup id 被 UINamingContainer 覆盖

Question

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

...

#gr-bg1 {
    ……
    背景颜色：红色；
    ……
}

...

并使用 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我想我解决了它读取tag通过 Firebug 生成的 html 的 Id 并替换Id了CSS-sheet.

在你的情况下：

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

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

否则，您可以通过在您自己的 Id 上方提供元素并使用它来防止 JSF 生成自己的 Id，例如将元素的“A4405”放置在您的 div 上方一层。