根据Kenan Banks的答案，你可以使用以下两个正则表达式匹配来使字符串有效:

[^a-z0-9A-Z_-]

这是一个反向匹配，选择任何不是字母、数字、破折号或下划线的东西，以便轻松删除。

^-*[0-9]+

它匹配字符串开头的0或1个破折号后面跟着1个或多个数字，也便于删除。

如何在PHP中使用它:

// Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);

// Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);

// Make sure the string is two or more characters long
return 2 <= strlen($class) ? $class : '';

令我惊讶的是，这里的大多数答案都是错误的。事实证明:

CSS类名中除了NUL之外的任何字符都是允许的。(如果CSS包含NUL(转义与否)，结果是未定义的。[CSS-characters])

Mathias Bynens的回答链接到如何使用这些名字的解释和演示。在CSS代码中，类名可能需要转义，但这不会改变类名。例如，一个不必要的超转义表示将看起来与该名称的其他表示不同，但它仍然引用相同的类名。

大多数其他(编程)语言没有转义变量名(“标识符”)的概念，因此变量的所有表示必须看起来相同。在CSS中不是这样的。

注意，在HTML中，没有办法在类名属性中包含空格字符(空格、制表符、换行符、换行符和回车符)，因为它们已经将类彼此分开了。

因此，如果你需要将一个随机字符串转换为CSS类名:注意NUL和空格，并转义(适用于CSS或HTML)。完成了。

对于HTML5和css3，类和id可以以数字开头。

阅读W3C规范(这是CSS 2.1;为您的浏览器假设找到合适的版本)

相关的段落:

在CSS中，标识符(包括 中的元素名称、类和id 选择器)只能包含 字符[a-z0-9]和iso10646 字符U+00A1及以上，加上 连字符(-)和下划线(_); 不能以数字或字母开头 连字符后面跟着一个数字。 标识符也可以包含转义 字符及任何iso10646字符 作为数字代码(见下一项)。为 实例中，标识符“B&W?”可以为 写成“B&W?”或“B\ 26w \3F”。

正如@mipadi在Kenan Banks的回答中指出的那样，在同一个网页上也有这样的警告:

在CSS中，标识符可以以“-”开头 (破折号)或“_”(下划线)。关键字 以及以" - "开头的属性名 或者'_'被保留 特定于供应商的扩展。这样的 特定于供应商的扩展应该具有 以下格式之一: '-' +供应商标识符+ '-' +有意义的名称 '_' +供应商标识符+ '-' +有意义的名称 示例(s): 例如，如果添加了XYZ组织 属性来描述的颜色 边境的东部 他们可能称之为“展示” -xyz-border-east-color。 其他已知的例子: -moz-box-sizing -moz-border-radius -wap-accesskey 开头的破折号或下划线是 保证永远不会被用在 属性或关键字由任何当前或 未来的CSS级别。这就是典型的CSS 实现可能无法识别这种情况 属性，并可能忽略它们 按规定办理 解析错误。然而，因为 开头的破折号或下划线是 语法，css2.1实现者 应该总是能使用一个 符合css的解析器，无论是否如此 它们支持任何特定于供应商的产品 扩展。 作者应该避免特定于供应商 扩展

我们可以在类名中使用所有字符。甚至像#和..我们只需要用\(反斜杠)来转义它们。

test \。123年{ 颜色:红色; ｝ test \ # 123 { 颜色:蓝色; ｝ test \ @123 { 颜色:绿色; ｝ test \ < 123 { 颜色:棕色; ｝ test \ ' 123 { 颜色:紫色; ｝ test \ ~ 123 { 颜色:番茄; ｝ < div class = " test.123”> test.123 < / div > < div class = "测试# 123 " >测试# 123 < / div > < div class = " test@123”> test@123 < / div > < div class = "测试< 123”测试< 123 > < / div > < div class = " 123 " >测试测试的123 < / div > 测试~ < div class = " 123 " >测试~ 123 < / div >

我已经在CSS字符转义序列中深入回答了你的问题。本文还解释了如何在CSS(和JavaScript)中转义任何字符，我还为此制作了一个方便的工具。从那一页开始:

如果你给一个元素的ID值 ~!@$%^&*()_+-=,./';:"?><[]{}| ' #，选择器看起来像这样: CSS: <时尚> #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\# ｛ 背景:hotpink; ｝ > < /风格 JavaScript: < >脚本 / /文档。getElementById或类似的 . getelementbyid ('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#'); / /文档。querySelector或类似的 $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#'); > < /脚本