1

私は JSF と PrimeFaces を使用しており、いくつかの CSS 行を変更または追加して render を変更しようとしています。

「styles.css」という名前の CSS ファイルを .xhtml ページに追加すると、PrimeFaces のファイルの後に読み込まれるので、デフォルト値をオーバーライドできます。

PrimeFaces は、私のページに div を作成します:

<div id="j_idt13:universe" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="width: 86px;">
....
</div>

86px サイズを 100% に変更しようとしているので、styles.css に追加しました:

#j_idt13:universe{
    width: 100%;    
}

しかし、うまくいきません... Firebug でソースコードを調べると、 #j_idt13:universe がどこにも表示されません...

クラス セレクター (.class) にアクセスすることで一部の CSS を変更できますが、id セレクター (#id) では変更できません。

私の場合、どうすれば 86px を 100% に変更できますか?

ありがとう

オリビエ

4

1 に答える 1

3

コロンは、疑似セレクターの開始を表すCSSセレクター:の特殊文字です。コロンを要素IDまたはクラス名の一部として文字通り表現する場合は、を使用してコロンをエスケープする必要があります。\

#j_idt13\:universe {

}

これはIE6/7では機能しないことに注意してください。代わりに使用する必要があります\3A （末尾にスペースがあります）。

#j_idt13\3A universe {

}

また、ビューに別のJSFコンポーネントを追加すると、これは失敗することに注意してください。これは、j_idt13ビュー内のコンポーネントの位置に応じて自動生成されたIDであり、固定IDではないためです。むしろ、親UINamingContainerコンポーネントに固定IDを与えるか、より適切には、ターゲットコンポーネントにスタイルクラスを与えて、クラスセレクターを使用できるようにします。

参照：

于 2012-10-21T13:42:22.547 に答える