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。Firebugを介して生成CSSされたhtmlのIDを読み込んで解決したと思います.tagIdCSS-sheet

あなたの場合：

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

それがベストプラクティスかどうかはわかりませんが、一種の回避策です。

それ以外の場合は、独自の ID の上に要素を指定し、代わりにこれを使用することで、要素の "A4405" のような独自の ID を JSF が div の 1 レベル上に配置するのを防ぐことができます。