It’s our lifelong dream to have a teammate die on the basics.

— Lu Xun said!

Serious writing code, not used to frame teammates, more important is to prevent teammates from playing (installed) handsome (forced) slip yourself.

Let out a villain laugh (crack)




fault

Let’s start with some HTML code

<div class="1-d"></div>
Copy the code

Some HTML and CSS books or articles on the web will say that the id and class on an element should not start with a number.

Some articles will also say that HTML can support id and class beginning with a number, but CSS does not.

I bah!

Take a look at the CSS code below

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

<style>
/* Note that.\31 is followed by a space */. \31 -d {
  width: 100px;
  height: 100px;
  background: steelblue;
}
</style>
Copy the code

Then open your browser and see what happens.

A blue div with 100px width and height appears.




Break down

shorthand

CSS Class name selector 和 The ID selectorIt’s not that you can’t start with a number, but you can’t write a number directly. You need to escape the number to use it.

The reason for the odd representation (the number “1” is represented by “\31 + space”) is that \31 plus space is a hexadecimal transcoding of the CSS character “1”. And 31 is the Unicode value of string 1.

You can print this value in JS code

console.log('1'.charCodeAt().toString(16)); / / output 31
Copy the code

Correspondingly, 0 is 30,9 is 39, and so on (no 10, 11, 12…). .

Of course, \31 plus space is shorthand, which can be a bit of a disadvantage (more on that later).


More professional writing (blind writing should also have an attitude)

Here is the CSS code

/* Note:.000031 does not need a space */. \000031-d {
  width: 100px;
  height: 100px;
  background: steelblue;
}
Copy the code

Complete with four zeros before 31 so that \31 does not have to be followed by a space.


Disadvantages of abbreviations

If the selector has a parent-child relationship, you need to type 2 Spaces.

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

<style>
  /* Note:.\31 is followed by two Spaces */. \31  span {
    display: block;
    width: 100px;
    height: 100px;
    background: steelblue;
  }
</style>
Copy the code

At this point, if you use CSS compression tools, or scaffolding packages like some frameworks provide, you will most likely strip out what the tool considers superfluous Spaces and turn them into a single space. This is a trap.

So it is advisable to write professionally.

Of course, try not to write such code if you can avoid it, because it hurts you too.


Similarly, it is ok to represent letters, not just numbers, with escaped code.

Such as

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

<style>
/* Note that.\61 is followed by a space */. \61 {
  display: block;
  width: 100px;
  height: 100px;
  background: steelblue;
}
</style>
Copy the code

In real development, it’s not recommended to write code this way!