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>
在实际开发中,很不建议使用这种方式编写代码!