web-dev-qa-db-ja.com

CSSセレクターの要素IDでのコロンの処理

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

input#search_form:expression {
  ///...
}
cssjsfcss-selectors
136
sblundy

バックスラッシュ：

input#search_form\:expression {  ///...}
107
Mark Cidade

コロンの前にバックスラッシュを使用しても、IE（特に6と7、場合によっては他のバージョン））の多くのバージョンでは機能しません。

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

例：

input#search_form\3A expression {  }

これはすべてのブラウザーで機能します。IE6+（およびそれ以前のバージョン）、Firefox、Chrome、Operaなどを含みます。これは CSS2標準 の一部です。

91
jomohke

この記事 は、CSSの文字をエスケープする方法を示します。

今、それのためのツールさえあります： http://mothereff.in/css-escapes#0search%5fform%3Aexpression

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

技術的には、コロン文字は\:としてエスケープできますが、IE <8では動作しないため、\3aを使用する必要があります：

#search\_form\3a expression {}
7
Mathias Bynens

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

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

CSS Spec から

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種類の文字エスケープを示します。まず、文字列内では、バックスラッシュとそれに続く改行は無視されます（つまり、文字列にはバックスラッシュも改行も含まれていないと見なされます）。

第二に、特別なCSS文字の意味をキャンセルします。任意の文字（16進数字を除く）をバックスラッシュでエスケープして、その特別な意味を削除できます。たとえば、「\」は、1つの二重引用符で構成される文字列です。スタイルシートプリプロセッサは、スタイルシートの意味を変更するため、スタイルシートからこれらのバックスラッシュを削除しないでください。

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

スペース（または他の空白文字）： "\ 26 B"（ "＆B"）。この場合、ユーザーエージェントは「CR/LF」ペア（U + 000D/U + 000A）を単一の空白文字として扱う必要があります。 "\ 000026B"（ "＆B"）実際には、これら2つの方法を組み合わせることができます。 16進エスケープの後に無視される空白文字は1つだけです。これは、エスケープシーケンスの後の「実際の」スペース自体をエスケープするか、2倍にしなければならないことに注意してください。

数値がUnicodeで許可されている範囲外にある場合（たとえば、「\ 110000」が現在のUnicodeで許可されている最大10FFFFを超えている場合）、UAはエスケープを「置換文字」（U + FFFD）に置き換えることができます。文字を表示する場合、UAは「行方不明の文字」グリフなどの可視シンボルを表示する必要があります（15.2、ポイント5を参照）。

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

5
Wayne

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

これを読む：

4
Krishna

コロンについても同じ問題があり、それらを変更できず（コロンを出力するコードにアクセスできなかった）、jQueryのCSS3セレクターでそれらを取得したかった。

私はここに置きました

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

4
naugtur

私はADFフレームワークで働いており、しばしば要素を選択するためにJQueryを使用する必要があります。このフォーマットは私に適しています。これはIE8でも機能します。

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