[解決済み] CSSのクラス名/セレクタに使用できる文字は？

質問

にはどのような文字/記号が使用できますか？ CSS クラスセレクタを使用することができますか？
次のような文字があることは知っています。 無効 しかし、どのような文字が 有効 ?

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

解決方法は？

で直接確認することができます。 CSS文法 .

基本的に ¹ の場合、名前はアンダースコアで始まる必要があります ( _ )、ハイフン( - )、または文字( a - 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?" または "B26 W

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

¹ エスケープされたユニコード文字（実際には誰も使わない）が含まれているため、すべてが少し複雑になっています。

² なお、リンク先の文法によると、ハイフン2本で始まるルール、例えば --indent1 は無効です。 しかし、実際に見てみると、確かにそうですね。