css - CSS类名称/选择器中哪些字符有效？(Which characters are valid in CSS class names/selectors?)

Question

What characters/symbols are allowed within CSS class selectors?

(CSS类选择器中允许使用哪些字符/符号？)

I know that the following characters are invalid , but what characters are valid ?

(我知道以下字符无效 ，但是哪些字符有效 ？)

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

  ask by Darryl Hein translate from so

Answer 1

You can check directly at the CSS grammar .

(您可以直接在CSS语法中进行检查。)

Basically ¹ , a name must begin with an underscore ( _ ), a hyphen ( - ), or a letter( a – z ), followed by any number of hyphens, underscores, letters, or numbers.

(基本上从 ¹开始，名称必须以下划线（ _ ），连字符（ - ）或字母（ a – z ）开头，后跟任意数量的连字符，下划线，字母或数字。)

There is a catch: if the first character is a hyphen, the second character must ² be a letter or underscore, and the name must be at least 2 characters long.

(有一个陷阱：如果第一个字符是连字符，第二个字符必须²是字母或下划线，并且名称必须至少2个字符长。)

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

In short, the previous rule translates to the following, extracted from the W3C spec.

(简而言之，从W3C规范中提取的先前规则转化为以下规则。)

:

(：)

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_);

(在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-z0-9]和ISO 10646字符U + 00A1及更高版本，以及连字符（-）和下划线（_） ;)

they cannot start with a digit, or a hyphen followed by a digit.

(它们不能以数字开头，也不能以连字符后接数字开头。)

Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).

(标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。)

For instance, the identifier "B&W?"

(例如，标识符“ B＆W？”)

may be written as "B\&W\?"

(可以写为“ B \＆W \？”)

or "B\26 W\3F".

(或“ B \ 26 W \ 3F”。)

Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity .

(以连字符或下划线开头的标识符通常保留给浏览器特定的扩展名，例如-moz-opacity 。)

¹ It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).

(¹由于包含转义的unicode字符（没有人真正使用过），这一切都变得更加复杂。)

² Note that, according to the grammar I linked, a rule starting with TWO hyphens, eg --indent1 , is invalid.

(²请注意，根据我链接的语法，以两个连字符开头的规则（例如--indent1 ）无效。)

However, I'm pretty sure I've seen this in practice.

(但是，我很确定我已经在实践中看到了这一点。)