css - 哪些字符在 CSS 类名/选择器中有效？

Question

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

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

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

Answer 1

您可以直接在CSS grammar查询.

基本上¹，名称必须以下划线 (_)、连字符 (-) 开头, 或一个字母 (a–z)，后跟任意数量的连字符、下划线、字母或数字。有一个问题:如果第一个字符是连字符，第二个字符必须² 是字母或下划线，并且名称必须至少有 2 个字符长。

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

简而言之，前面的规则转换为以下规则，摘自 W3C specification :

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); 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). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

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

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

² 请注意，根据我链接的语法，以两个 连字符开头的规则(例如，--indent1)是无效的.但是，我很确定我已经在实践中看到了这一点。