CSS类名称/选择器中哪些字符有效？

通过@Triptych的答案，您可以使用以下2个正则表达式匹配项来使字符串有效：

[^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 2 or more characters long
return 2 <= strlen($class) ? $class : '';

我的理解是，下划线在技术上是有效的。查看：

https://developer.mozilla.org/en/underscores_in_class_and_id_names

“ ... 2001年初发布的规范的勘误表首次强调了合法性。”

上面链接的文章说，从不使用它们，然后给出了不支持它们的浏览器列表，至少就用户数量而言，所有浏览器都是冗长的。

对于HTML5 / CSS3，类和ID可以以数字开头。

The complete regular expression is:

-?(?:[_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])*

So all of your listed character except “-” and “_” are not allowed if used directly. But you can encode them using a backslash foo\~bar or using the unicode notation foo\7E bar.