CSS 类名中广泛支持哪些字符？

Posted 2023-03-16

【中文标题】CSS 类名中广泛支持哪些字符？

【英文标题】：What characters are widely supported in CSS class names?

【发布时间】：2011-02-06 17:06:15

【问题描述】：

如here 等处详述，html/css 类名中唯一有效的字符是 a-z、A-Z、0-9、连字符和下划线，并且第一个字符应该是字母。但实际上，大多数浏览器实际上支持哪些字符？更具体地说，我想知道哪些浏览器可以正确理解类名中的斜杠 (/)，以及哪些浏览器支持以数字开头的类名。

我主要感兴趣的是获得 html 而不是 xhtml 的答案，以防有区别。

谢谢。

【问题讨论】：

你刚才不是说“a-z, A=Z, 0-9, =, _”吗？

这些是有效字符，但实际上至少某些浏览器也支持其他字符。我想知道除了有效字符（如果有的话）之外，哪些字符可以可靠地使用。

为什么不直接打开记事本测试一下...

为什么还要考虑使用无效的类名？

有时在开头使用数字或斜线或其他字符只是命名类的最自然方式，因此例如在开头添加字母可能会损害类的可读性标记很多。

【参考方案1】：

请注意，类名是由 HTML 而非 CSS 定义的。 HTML4 saysclass 属性是一个cdata-list，它是空格分隔的标记。因此，单个类名标记可以包含除空白字符之外的任何字符。

我想知道哪些浏览器可以正确理解类名中的斜杠 (/)，以及哪些浏览器支持以数字开头的类名。

要在 CSS 类选择器中引用此类名称，您需要使用转义。例如：

<div class="1blah/bläh">

匹配：

.\31 blah\2F bläh  ... 

当前所有浏览器都支持此功能。 IE5 不支持它，但幸运的是，这不再是一个问题。 （如果您担心字符编码不匹配，您可能更愿意将 ä 编码为 \E4，但这并不是 CSS 本身的限制。）

如果您询问哪些浏览器可以让您摆脱无效的选择器

.1blah/bläh

那么，谁在乎呢？只需使用有效的。

【讨论】：

+1，我很想再给你一个单独的最后一行！

有效的类名是由 CSS 定义的。但在 HTML 中也有效的只是其中的一个子集。请注意，CSS 是一种样式表语言，可用于任何结构化语言，而不仅仅是 HTML。

谢谢 bobince，这为我解决了问题！我最初将这个问题命名为“HTML 类名中广泛支持哪些字符？”但有人将“HTML”更改为“CSS”。在这种情况下，对我来说重要的是让 HTML 可读而不冒问题，所以这很有帮助。在这种情况下，IE5 中断可能不是问题。谢谢！

啊，我明白了。 [是的，XHTML 和 FWIW 基本上没有区别。]

所以class="a1<2" 有效吗？

【参考方案2】：

http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html

如果你看一下语法，你就会明白标识符被定义为

ident       nmstartnmchar*
nmstart     [a-zA-Z]|nonascii|escape
nmchar      [a-z0-9-]|nonascii|escape
nonascii    [^\0-\177]
unicode     \\[0-9a-f]1,6[ \n\r\t\f]?

所以这是你的答案..

（这是针对 CSS2 的）

【讨论】：

这并没有解释实际支持哪些字符或序列。是否支持.foo\ bar、.\/ 或.\1234？

【参考方案3】：

Unicode 工作 http://snook.ca/archives/html_and_css/unicode_for_css_class_names

【参考方案4】：

/ 和其他符号用作 选择器（尤其是在 CSS3 中），因此不能在类名中使用。支持的字符是你已经说过的。