1290

CSSクラス セレクターで使用できる文字/記号は何ですか?
次の文字が無効であることはわかっていますが、有効な文字は何ですか?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
4

11 に答える 11

1089

CSS grammarで直接確認できます。

基本的に1_ 、名前はアンダースコア ( )、ハイフン ( -)、または文字 ( a–<code>z) で始まり、任意の数のハイフン、アンダースコア、文字、または数字が続く必要があります。注意点があります。最初の文字がハイフンの場合、2 番目の文字は文字またはアンダースコアでなければならず、名前は少なくとも 2 文字の長さでなければなりません。

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

つまり、前のルールは、W3C 仕様から抽出された次のように変換されます。:

CSS では、識別子 (セレクターの要素名、クラス、および ID を含む) には、文字 [a-z0-9] と ISO 10646 文字 U+00A0 以降、およびハイフン (-) とアンダースコアー (_) のみを含めることができます。 ; 数字で始めることも、ハイフンの後に数字を続けることもできません。識別子には、エスケープ文字と ISO 10646 文字を数値コードとして含めることもできます (次の項目を参照)。たとえば、識別子「B&W?」「B&W?」と表記される場合があります。または「B\26 W\3F」。

ハイフンまたはアンダースコアで始まる識別子は、通常、 のようにブラウザ固有の拡張機能用に予約されてい-moz-opacityます。

1エスケープされた Unicode 文字 (実際には誰も使用しない) が含まれているため、すべてが少し複雑になっています。

2リンクした文法によると、2 つのハイフンで始まる規則 (たとえば--indent1) は無効であることに注意してください。しかし、私はこれを実際に見たことがあると確信しています。

于 2009-01-15T23:42:27.670 に答える
201

驚いたことに、ここでのほとんどの答えは間違っています。次のことがわかります。

CSS の CSS クラス名には、NUL 以外の任意の文字を使用できます。(CSS に NUL (エスケープされているかどうかにかかわらず) が含まれている場合、結果は未定義です。[ CSS-characters ])

Mathias Bynens の回答は、これらの名前の使用方法を示す説明とデモへのリンクです。クラス名を CSS コードに書き留めると、エスケープが必要になる場合がありますが、それによってクラス名が変更されることはありません。たとえば、不必要に過度にエスケープされた表現は、その名前の他の表現とは異なって見えますが、それでも同じクラス名を参照しています。

他のほとんどの (プログラミング) 言語には、変数名 (「識別子」) をエスケープするという概念がないため、変数のすべての表現は同じに見える必要があります。これは、CSS には当てはまりません。

HTML では、スペース文字 (スペース、タブ、改行、フォーム フィード、キャリッジ リターン)をクラス名属性に含める方法がないことに注意してください。これらは既にクラスを互いに分離しているためです。

そのため、ランダムな文字列を CSS クラス名に変換する必要がある場合は、NUL とスペース、およびエスケープに注意してください (CSS または HTML の場合)。終わり。

于 2011-07-18T12:32:15.180 に答える
82

私はここであなたの質問に深く答えました：http：//mathiasbynens.be/notes/css-escapes

この記事では、CSS（およびJavaScript）で任意の文字をエスケープする方法についても説明しています。また、このための便利なツールも作成しました。そのページから：

要素にID値を~!@$%^&*()_+-=,./';:"?><[]{}|`#指定すると、セレクターは次のようになります。

CSS：

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript：

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>
于 2011-07-06T06:41:42.393 に答える
71

W3C 仕様を読んでください。(これは CSS 2.1 です。ブラウザの想定に適したバージョンを見つけてください)

編集：関連する段落が続きます：

CSS では、識別子 (セレクターの要素名、クラス、および ID を含む) には、文字 [a-z0-9] と ISO 10646 文字 U+00A1 以降、およびハイフン (-) とアンダースコアー (_) のみを含めることができます。 ; 数字で始めることも、ハイフンの後に数字を続けることもできません。識別子には、エスケープ文字と ISO 10646 文字を数値コードとして含めることもできます (次の項目を参照)。たとえば、識別子「B&W?」「B\&W\?」と表記される場合があります。または「B\26 W\3F」。

編集2：@ mipadiがTriptychの回答で指摘しているように、同じWebページにもこの警告があります：

CSS では、識別子は「-」(ダッシュ) または「_」(アンダースコア) で始まる場合があります。「-」または「_」で始まるキーワードとプロパティ名は、ベンダー固有の拡張用に予約されています。このようなベンダー固有の拡張機能は、次のいずれかの形式にする必要があります。

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

例:

たとえば、XYZ 組織がディスプレイの東側の境界線の色を記述するプロパティを追加した場合、彼らはそれを -xyz-border-east-color と呼ぶかもしれません。

その他の既知の例:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

最初のダッシュまたはアンダースコアは、CSS の現在または将来のレベルで、プロパティまたはキーワードで決して使用されないことが保証されています。したがって、典型的な CSS 実装は、そのようなプロパティを認識せず、解析エラーを処理するためのルールに従って無視する場合があります。ただし、最初のダッシュまたはアンダースコアは文法の一部であるため、CSS 2.1 の実装者は、ベンダー固有の拡張機能をサポートしているかどうかにかかわらず、常に CSS 準拠のパーサーを使用できる必要があります。

作成者は、ベンダー固有の拡張機能を避ける必要があります

于 2009-01-15T23:45:09.863 に答える
27

完全な正規表現は次のとおりです。

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

そのため、「<code>-」と「<code>_」を除くすべてのリストされた文字を直接使用することはできません。foo\~barただし、バックスラッシュまたはユニコード表記を使用してエンコードできますfoo\7E bar。

于 2009-01-16T00:05:03.897 に答える
14

回避策を探している場合は、たとえば、クラスが数字で始まる場合、属性セレクターを使用できます。変化する：

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

これに：

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

また、複数のクラスがある場合は、それらをセレクターで指定するか、~=演算子を使用する必要があります。

[class~="000000-8"]{background:url(../../images/common/000000-0.8.png);}

ソース:

  1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
  2. 数字で始まる名前の CSS クラスを有効にする回避策はありますか?
  3. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
于 2016-06-23T17:33:28.347 に答える
5

私の理解では、アンダースコアは技術的に有効です。チェックアウト：

https://developer.mozilla.org/en/underscores_in_class_and_id_names

「...2001 年初頭に公開された仕様の正誤表により、初めてアンダースコアが有効になりました。」

上にリンクされた記事は、それらを決して使用しないと述べ、それらをサポートしていないブラウザーのリストを提供します。それらはすべて、少なくともユーザー数に関しては、冗長です.

于 2010-07-31T05:33:54.117 に答える
4

HTML5 / CSS3の場合、クラスとIDは数字で始めることができます。

于 2009-10-12T14:04:04.020 に答える