CSS类选择器中允许使用哪些字符或符号？
我知道以下字符是无效的，但是哪些字符是有效的？
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
CSS类名/选择器中哪些字符是有效的？
1339
- Darryl Hein
10
11个回答
1119
你可以直接查看CSS语法。
基本上1，名称必须以下划线（_），连字符（-）或字母(a–z)开头，然后可以是任意数量的连字符、下划线、字母或数字。有一个要注意的地方: 如果第一个字符是连字符，则第二个字符必须是字母或下划线，并且名称长度必须至少为2个字符。
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
在CSS中，标识符（包括选择器中的元素名称、类和ID）只能包含字符[a-z0-9]和ISO 10646字符U+00A0及以上，以及连字符（-）和下划线（_），不能以数字或连字符后跟数字开头。标识符也可以包含转义字符和任何ISO 10646字符作为数字编码（参见下一项）。例如，标识符“B&W?”可以写成“B&W?”或“B\26 W\3F”。
以连字符或下划线开头的标识符通常保留用于浏览器特定的扩展，如-moz-opacity。
注意根据我链接的语法，以两个连字符开头的规则，例如--indent1，是无效的。然而，我很确定我在实践中看到过这种情况。
- Triptych
3
67注意：W3C表示在CSS中使用前导符号“-”或“_”应该保留给供应商特定的CSS扩展（例如Mozilla浏览器实现的-moz*类）。 - mipadi
我添加了一个不以_或字母开头而是表情符号的示例。我不建议为类使用这样的命名方式，但它确实可以工作。对于一般的好奇心来说，了解这一点还是很有用的。https://dev59.com/QHRB5IYBdhLWcg3w-8A9#69963534 - Lukas Liesis
9截至2022年，CSS规范将类名（在
.css规则的选择器中）定义为“。”+标识符，并且标识符的词法扫描器规则明确允许在初始[_A-Za-z]字符之后的类名中使用除0x00-0x7F以外的任何字符，因此此处发布的[_a-zA-Z0-9-]*模式是不正确的。 - Dai218
令我惊讶的是，这里大多数答案都是错误的。事实证明：
在 CSS 中，CSS 类名允许使用除 NUL 之外的任何字符。（如果 CSS 包含 NUL（转义或未转义），则结果是未定义的。[CSS-characters]）然而，在 HTML 中，永久未分配的代码点也不被允许。HTML 也没有一种方法可以在 class name attribute 中包含空格字符（空格、制表符、换行符、换页符和回车符），因为这些是类列表，空格用于将类名彼此分开。
在 CSS 中，CSS 类名允许使用除 NUL 之外的任何字符。（如果 CSS 包含 NUL（转义或未转义），则结果是未定义的。[CSS-characters]）然而，在 HTML 中，永久未分配的代码点也不被允许。HTML 也没有一种方法可以在 class name attribute 中包含空格字符（空格、制表符、换行符、换页符和回车符），因为这些是类列表，空格用于将类名彼此分开。
Mathias Bynens' answer 链接到 解释 和 演示，展示如何使用这些名称。在 CSS 代码中书写时，类名可能需要转义，但这并不会改变类名。例如，一个过度转义的表示法看起来与该名称的其他表示法不同，但仍然指代相同的类名。
大多数其他（编程）语言没有转义变量名（“标识符”）的概念，因此变量的所有表示形式都必须看起来相同。但在 CSS 中不是这样的。
因此，如果您需要将随机字符串转换为 CSS 类名：注意 NUL 和空格，并进行适当的转义（针对 CSS 或 HTML）。完成。
- Robert Siemer
89
我已经在CSS字符转义序列的文章中详细回答了你的问题。 该文章还解释了如何在CSS（和JavaScript）中转义任何字符，我还制作了一个方便的工具。 来自那个页面：
如果您给一个元素ID值为
~！@ $％^＆*（）_ +-=，./';：“？>< [] {} | `#，选择器将如下所示：CSS：
<style> #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\# { background: hotpink; } </style>JavaScript:
->JavaScript：
<script> // document.getElementById or similar document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#'); // document.querySelector or similar $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#'); </script>
- Mathias Bynens
73
阅读W3C规范。（这是CSS 2.1版本；请为你假设的浏览器版本查找适当的版本。）
相关段落：
在CSS中，标识符（包括选择器中的元素名称、类和ID）只能包含字符[a-z0-9]和ISO 10646字符U+00A1及更高版本，以及连字符(-)和下划线(_)；它们不能以数字或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（见下一条）。例如，“B＆W？”标识符可写为“B＆W？”或“B \ 26 W \ 3F”。
正如@mipadi在Kenan Banks的答案中指出的那样，在同一网页中还有这个警告：
在CSS中，标识符可以以连字符(-)或下划线(_)开头。以“-”或“_”开头的关键字和属性名被保留供供应商特定的扩展使用。这种供应商特定的扩展应该采用以下格式之一：
相关段落：
在CSS中，标识符（包括选择器中的元素名称、类和ID）只能包含字符[a-z0-9]和ISO 10646字符U+00A1及更高版本，以及连字符(-)和下划线(_)；它们不能以数字或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（见下一条）。例如，“B＆W？”标识符可写为“B＆W？”或“B \ 26 W \ 3F”。
正如@mipadi在Kenan Banks的答案中指出的那样，在同一网页中还有这个警告：
在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标准的解析器，无论它们是否支持任何供应商特定的扩展。
作者应避免使用供应商特定的扩展。
- Jason S
28
完整的正则表达式为：
-?(?:[_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])*
除了“-”和“_”以外，您列出的所有字符如果直接使用将不被允许。但是您可以使用反斜杠进行编码foo\~bar或使用Unicode符号foo\7E bar。
- Gumbo
18
对于那些寻找解决办法的人，可以使用属性选择器。例如，如果您的类以数字开头，请更改：
.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);}
参考来源：
注：本文介绍了如何在ID和class名称中使用数字，以及如何使用属性选择器来选择以数字开头的类名。同时提供了一些相关的参考链接。- D.Tate
9
- Lukas Liesis
6
我的理解是下划线在技术上是有效的。请查看以下链接：https://developer.mozilla.org/en/underscores_in_class_and_id_names。该链接中提到：“......2001年初发布的规范勘误首次将下划线合法化。”但是该文章建议不要使用下划线，并列出了一些不支持下划线的浏览器，这些浏览器的用户数量已经很少了。
- mofaha
1
1链接已损坏：“页面未找到” - Peter Mortensen
5
我们可以在类名中使用所有字符，即使是像
#和.这样的字符。我们只需要用\（反斜杠）进行转义即可。
.test\.123 {
color: red;
}
.test\#123 {
color: blue;
}
.test\@123 {
color: green;
}
.test\<123 {
color: brown;
}
.test\`123 {
color: purple;
}
.test\~123 {
color: tomato;
}<div class="test.123">test.123</div>
<div class="test#123">test#123</div>
<div class="test@123">test@123</div>
<div class="test<123">test<123</div>
<div class="test`123">test`123</div>
<div class="test~123">test~123</div>- doğukan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
.hello/world类:.hello\2fworld,hello\2f world或hello\/world。 - wyqydsyq