如何用 CSS 选择符 (数字开头) 杀死队友

让队友死于最基础的知识点，是我们毕生的向往。

——鲁迅没说过

一本正经的胡写代码，不至于用来陷害队友，更重要的是防止队友滑自己。

发出一声属于反派的爽朗笑声（破音）

先来看一段 HTML 代码

<div class="1-d" ></div>

有部分 HTML 和 CSS 的书或者网上有些文章会说，元素上的 id 和 class 是不能以数字开头的。

有部分文章也会说，HTML 可以支持 id 和 class 以数字开头，但 css 不支持。

我呸~

请看下面的 CSS 代码（要结合上面的 HTML 代码使用）

/* 注意：.\31 后面有一个空格 */.\31 -d {  width: 100px;  height: 100px;  background: steelblue;}

然后再打开浏览器看看效果。

一个宽高都为 100px、蓝色的 div 出现了。不信可以自己复制代码试试看。

划重点！

CSS 类名选择器 和 ID 选择器 并不是不能以数字开头，而是不能直接写数字，需要将数字转义一下才能使用。

之所以出现这么奇怪的表示方式（1 = \31 + 空格），是因为 \31 外加空格是 CSS 字符 “1” 的十六进制转码。而 31 就是字符串 1 的 Unicode 值。

可以用 JS 代码输出这个值

console.log('1'.charCodeAt().toString(16)); // 输出 31

对应的，0 是 30，9 是 39，以此类推（没有 10、11、12...）。

当然，\31 外加空格 属于简写，这种写法会有一点弊端，稍后说到。

更加专业的写法（瞎写也要有个态度）

以下是 css 代码

/* 注意：.\000031 后面不需要加空格 */.\000031-d {  width: 100px;  height: 100px;  background: steelblue;}

在 31 前用 4 个 0 补全，这样 \31 后面就不用加空格了。

简写的弊端

如果选择器出现了父子关系，则需要敲 2 个空格。

<style>  /* 注意：.\31 后面有2个空格 */  .\31  span {    display: block;    width: 100px;    height: 100px;    background: steelblue;  }</style>
<div class="1">    <span></span></div>

这时，如果使用了 CSS 压缩工具，或者是像一些框架提供的脚手架打包项目，很有可能会把工具认为多余的空格去掉，变成一个空格。这就坑自己了。

所以还是建议用专业的写法去书写。

当然，能不写这种代码就尽量不要写啦，毕竟自己也不好受。

同理，不止数字，字母使用转义后的代码来表示也是没问题的。

比如

/* 注意：.\61 后面有一个空格 */.\61 {  display: block;  width: 100px;  height: 100px;  background: steelblue;}
<div class="a"></div>