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

CSS

猿小宇宙小哥

2020-03-13

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

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

第1556篇《CSS类名称/选择器中哪些字符有效？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
古一JinJin 2020.03.13

通过@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 : '';
Tony达蒙Mandy 2020.03.13

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

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

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

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

Itachi小宇宙 2020.03.13

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

A达蒙 2020.03.13

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.

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android