哪些字符在 CSS 类名/选择器中有效? [英] Which characters are valid in CSS class names/selectors?

问题描述

CSS 类选择器中允许使用哪些字符/符号?
我知道以下字符无效，但哪些字符有效?

What characters/symbols are allowed within the CSS class selectors?
I know that the following characters are invalid, but what characters are valid?

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

推荐答案

您可以直接查看 CSS 语法.

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

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. 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.

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

简而言之，之前的规则转化为以下内容，摘自 W3C 规范.:

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

在 CSS 中，标识符(包括元素名称、类和 ID选择器)只能包含字符 [a-z0-9] 和 ISO 10646字符 U+00A0 及更高，加上连字符 (-) 和下划线(_);它们不能以数字开头，也不能以连字符后跟数字开头.标识符还可以包含转义字符和任何 ISO 10646字符作为数字代码(见下一项).例如，标识符B&W?"可以写成B&W?"或B26 W3F".

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 "B26 W3F".

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

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

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

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

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

² Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. --indent1, is invalid. However, I'm pretty sure I've seen this in practice.

这篇关于哪些字符在 CSS 类名/选择器中有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！