Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

If you don’t want to use inline styles, just move the style to the class property! But this is obviously a problem!

Let’s take a closer look at what this paragraph means:

  • First of all, it’s a joke, so don’t really do it. I don’t mind an inlining once in a while, but this is different.
  • The strangest part for me was the period (.) character. It feels normal to escape more unusual characters with a backslash (), but what does that period mean?update: It’s because of space. It’s two classes in HTML, not one.
  • When the following characters are numbers (e.g.padding:.1rem;), the period technique does not work.update: Because classes that start with a number are invalid.
  • If you use a property selector like this, you can avoid escaping and spoofing[class*="display: flex;"].
  • This reminds me of a study by Mathias Bynens:CSS character escape sequence. But… That doesn’t seem to work anymore, right? I wonder if the browser has changed, or if the tool is broken and no longer outputs what it should (e.g.color\3A \ #f06d06Does it look right?) .

Here are some examples:

.display\:.flex\; {
  display: flex;
}

/* This does not match, should be numeric first reason */
.padding\ ".1rem\; {
  padding: 1rem;
}

/* If you place it in the property selector and remove the period where the space is (.) Character is available. * /
[class*="padding\: 1rem\;"] {
  padding: 1rem;
}

/* Or in the property selector, remove the backslash */
[class*="padding: 1rem;"] {
  padding: 1rem;
}

/* Complete escape. The tool says it should, but it doesn't: https://mothereff.in/css-escapes */
.padding\3a \1rem\; {
  background: hotpink;
}

.display\ : inline - 📦 \; {display: inline-block;
}

.color\:.red\; {
  color: red;
}

.color\ : \#00cccc\; {
  color: #00cccc;
}
Copy the code
<div class="display: flex; padding: 1rem;">
  <div class="padding: 1rem;">Home</div>
  <div class="padding: 1rem;">About</div>
  <div class="padding: 1rem;">GitHub</div>
</div>

<div class="Display: inline - 📦; color: red;">A piece of text</div>
<div class="Display: inline - 📦; color: red;">A piece of text</div>

<div class="color: #00cccc;">A piece of text</div>
Copy the code

Code running results: