【一本正经】如何用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; }

本文章由javascript技术分享原创和收集