css - JSF + CSS : custom panelGroup id is overriden by UINamingContainer

Question

我有一个用 CSS 设计的 HTML 页面。 DIV 和 SPAN 元素的选择器如下所示:

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

and create appropriate of it xhtml page with panelGroups:

 <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;
.... }

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

否则，您可以通过将元素置于您自己的 ID 之上并使用它来阻止 JSF 生成自己的 ID，例如元素的“A4405”被放置在您的 div 之上一层。