【一本正经】如何用CSS选择符(数字开头) 杀死队友

微信订阅号：Rabbit_svip

---

让队友死于最基础的知识点，是我们毕生的向往。
——鲁迅没说过

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

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

---

先来看一段HTML代码

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

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

我呸~

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

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

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

微信订阅号：Rabbit_svip

一个宽高都为 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 外加空格 属于简写，这种写法会有一点弊端，稍后说到。

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

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

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

简写的弊端

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

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

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

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

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

比如

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