CSS セレクターの要素 ID 内のコロンの処理 [重複]

https://stackoverflow.com/questions/122238

02-07-2019
|

質問

この質問にはすでに答えがあります:

CSS セレクターでコロン「:」を含む JSF 生成の HTML 要素 ID を使用するにはどうすればよいですか? 2 つの回答

JSF は入力フィールドの ID を次のように設定しています。 search_form:expression. 。その要素に何らかのスタイルを指定する必要がありますが、そのコロンはブラウザにとって疑似要素の始まりのように見えるため、無効としてマークされ無視されます。とにかく結腸か何かから逃れる方法はありますか？

input#search_form:expression {
  ///...
}

解決

バックスラッシュ:

input#search_form\:expression {  ///...}

こちらも参照 CSS での名前空間の使用 (MSDN)

他のヒント

コロンの前にバックスラッシュを使用すると、多くのバージョンの IE (特に 6 と 7;おそらく他の人も）。

回避策は、コロンに 16 進コード (\3A) を使用することです。

例：

input#search_form\3A expression {  }

これはすべてのブラウザで機能します。IE6 以降 (おそらくそれ以前)、Firefox、Chrome、Opera などが含まれます。それはの一部です CSS2標準.

この記事 CSS 内の文字をエスケープする方法を説明します。

今では、そのためのツールもあります。 http://mothereff.in/css-escapes#0search%5fform%3Aexpression

TL;DR この質問に対する他の回答はすべて間違っています。セレクターが異なるブラウザー間で適切に機能するには、アンダースコア (IE6 が一部のエッジケースでルールを完全に無視するのを防ぐため) とコロン文字の両方をエスケープする必要があります。

技術的には、コロン文字は次のようにエスケープできます。 \:, ただし、IE 8 未満では機能しないため、次を使用する必要があります。 \3a:

#search\_form\3a expression {}

バックスラッシュでエスケープできます

input#search_form\:expression {
  ///...
}

から CSS仕様

4.1.3 文字と大文字小文字の区別

次のルールが常に当てはまります。

CSS の制御下にない部分を除き、すべての CSS スタイルシートでは大文字と小文字が区別されません。たとえば、HTML 属性の「id」と「class」の値、フォント名、URI の大文字と小文字の区別は、この仕様の範囲外です。特に、要素名は HTML では大文字と小文字が区別されませんが、XML では大文字と小文字が区別されることに注意してください。CSS では、識別子 (セレクター内の要素名、クラス、ID を含む) に含めることができるのは、文字 [a-z0-9] と ISO 10646 文字 U+00A1 以上、およびハイフン (-) とアンダースコア (_) のみです。 ;数字で始めたり、ハイフンの後に数字を続けることはできません。識別子には、エスケープ文字や任意の ISO 10646 文字を数値コードとして含めることもできます (次の項目を参照)。たとえば、識別子「B＆W？」「b ＆w ？」と書かれている場合があります。または「b 26 w 3f」。Unicode はコードごとに ISO 10646 と同等であることに注意してください ([UNICODE] および [ISO10646] を参照)。

CSS 2.1 では、バックスラッシュ () 文字は 3 種類の文字エスケープを示します。まず、文字列内では、バックスラッシュとそれに続く改行は無視されます (つまり、文字列にはバックスラッシュも改行も含まれていないとみなされます)。

2 番目に、特殊な CSS 文字の意味が無効になります。任意の文字 (16 進数を除く) をバックスラッシュでエスケープして、その特別な意味を削除できます。たとえば、「\"」は 1 つの二重引用符で構成される文字列です。スタイルシートの意味が変わってしまうため、スタイルシートプリプロセッサはスタイルシートからこれらのバックスラッシュを削除してはなりません。

3 番目に、バックスラッシュエスケープを使用すると、作成者は文書に簡単に含めることができない文字を参照できます。この場合、バックスラッシュの後には最大 6 桁の 16 進数字 (0..9A..F) が続きます。これは、その番号を持つ ISO 10646 ([ISO10646]) 文字を表し、ゼロであってはなりません。(CSS 2.1 では、スタイルシートに Unicode コードポイント 0 の文字が含まれている場合に何が起こるかは未定義です。) [0-9a-f] の範囲の文字が 16 進数の後に続く場合は、数字の末尾を付ける必要があります。クリア。それには次の 2 つの方法があります。

スペース (または他の空白文字) を使用した場合:「￥26B」（「＆B」）。この場合、ユーザーエージェントは「CR/LF」ペア (U+000D/U+000A) を単一の空白文字として扱う必要があります。正確に 6 桁の 16 進数を指定すると、次のようになります。「 000026b」（「＆b」）実際には、これらの2つの方法を組み合わせることができます。16 進エスケープの後は、空白文字 1 文字だけが無視されます。これは、エスケープシーケンスの後の「実際の」スペース自体をエスケープするか二重化する必要があることを意味することに注意してください。

数値が Unicode で許可されている範囲外の場合 (たとえば、「\110000」が現在の Unicode で許可されている最大値 10FFFF を超えている)、UA はエスケープを「置換文字」(U+FFFD) に置き換えることがあります。文字を表示する場合、UA は「欠落文字」グリフなどの目に見える記号を表示する必要があります (cf.15.2、ポイント 5)。

注記：バックスラッシュエスケープが許可されている場合、常に識別子または文字列の一部とみなされます (つまり、「{」は句読点であっても「\7B」は句読点ではなく、クラス名の先頭には「\32」が許可されます) 、「2」はそうではありませんが）。識別子「te\st」は「test」とまったく同じ識別子です。

コロンに関しても同じ問題があり、コロンを変更できなかったので（コロンを出力するコードにアクセスできませんでした）、jQueryを使用してCSS3セレクターを使用してコロンをフェッチしたいと思いました。

誰かの役に立つかもしれないのでここに置きます

input[id="something:something"] jQuery セレクターでは正常に動作しましたが、スタイルシートでも同様に動作する可能性があります (ブラウザの問題がある可能性があります)。

JSF 2,0 では、web.xml ファイルを javax.faces.SEPARATOR_CHAR の init-param として使用してセパレータを指定できます。

これを読む：

JSFで要素IDの区切り文字を変更することはできますか?

私は ADF フレームワークで作業しているため、要素を選択するために JQuery を使用する必要があることがよくあります。この形式は私にとってはうまくいきます。これはIE8でも動作します。

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);

IE7 (Firefox も) ではこの形式のみが機能することがわかり、JSF/Icefaces 1.8.2 を使用しています。

Say form id=FFF, element id=EEE

var jq=jQuery.noConflict();
jq(document).ready(function() {
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib function options go here })
});

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow