如何用 CSS 选择符杀死队友

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题：https://github.com/xitu/juejin-markdown-themes

theme: juejin highlight:

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

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

发出一声反派的笑声（破音）

作死

先来看一段HTML代码

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

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

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

我呸！

请看下面的 CSS 代码

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

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

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

一个 宽高都为 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个空格。

<div class="1">
  <span></span>
</div>

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

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

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

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

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

比如

<div class="a"></div>

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

在实际开发中，很不建议使用这种方式编写代码！