CSS でコロンを含む ID を使用して JSF コンポーネントのスタイルを設定するにはどうすればよいですか?

CSS セレクターでコロンを使用して JSF で生成された識別子をターゲットにする方法

JSF アプリケーションでは、コンポーネントがコロンを含むクライアント ID でレンダリングされる場合があります。 「phoneForm:phoneTable」のように。これらのコロンは、疑似クラスを示すためにコロンを使用する CSS セレクターの構文と競合する可能性があります。

1。コロンをエスケープします:

バックスラッシュ () を使用してコロンをエスケープします。これはほとんどのブラウザで機能します。

#phoneForm\:phoneTable {
    background: pink;
}

2.スペースでエスケープしたバックスラッシュを使用します:

IE6/7 では、エスケープされたコロンの末尾にスペースが必要です。

#phoneFormA phoneTable {
    background: pink;
}

3.ネイティブ要素でラップする:

JSF コンポーネントを通常の HTML 要素でラップし、ラッパーにスタイルを適用します。

<h:form>

#phoneField table {
    background: pink;
}

4.代わりにクラスを使用します:

コンポーネントに ID の代わりに CSS クラスを割り当てます。これにより、コロンの問題が解消されます。

<h:dataTable>

.pink {
    background: pink;
}

5. JSF 区切り文字の変更 (JSF 2.x ):

web.xml の JSF UINamingContainer 区切り文字をコロンではなくハイフン (-) に変更します。

<context-param>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>-</param-value>
</context-param>

#phoneForm-phoneTable {
    background: pink;
}

コンポーネント ID へのフォーム ID の先頭付加を無効にします。ただし、これは AJAX 処理で問題を引き起こす可能性があるため、推奨されません。

    <h:dataTable>

#phoneTable {
    background: pink;
}

推奨事項:

特定のケースでは、次のような CSS クラスを使用します。 「phoneTable」は、柔軟性を実現し、JSF 命名コンテナとの潜在的な競合を回避するため、最も適切なソリューションです。

以上がCSS でコロンを含む ID を使用して JSF コンポーネントのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。