#书摘 #css #前端
《CSS 选择器世界》3.2 CSS选择器命名的合法性
本节主要讲解类选择器和ID选择器的命名合法性问题，旨在纠正大家长久以来的错误认识。最常见的错误认识就是类选择器和ID选择器不能以数字开头，如下：

.1-foo { border: 10px dashed; padding: 10px; } /* 无效 */​​



对，上面这种写法确实无效，但这并不是因为不能以数字开头，而是不能直接写数字，需要将其转义，如下：

.\31 -foo { border: 10px dashed; padding: 10px; }​​



为什么转义表示为 \31 且后面还有一个空格呢？
其实 \31 外加空格是CSS中字符 1 的十六进制转义表示。其中 31 就是字符 1 的 Unicode 值，如下：

console.log('1'.charCodeAt().toString(16)); // 结果是31​​



字符0的Unicode值是30，字符9的Unicode值是39，0～9这10个数字对应的Unicode值正好是30～39。
我们也可以用以下这种方法进行表示：

.\000031-foo { border: 10px dashed; padding: 10px; }​​



31前面用4个0进行补全，这样 \31 后面就不用加空格了。
类名或者ID甚至可以是纯数字，然而，CSS压缩工具会乱压空格，所以在实际开发时，如果想使用数字，建议使用非空格完整表示法。