用class属性写内联样式style

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

如果您不想使用内联样式，只需将其 style 移至 class 属性就行了！ 不过，这显然是毛病！

让我们深入了解段含义：

• 首先，这是一个笑话，所以不要真的这样做。我不介意偶尔一把梭内联样式，但这次情况不同。
• 对我来说最奇怪的部分是那个句号 (.) 字符。用反斜杠 () 转义更不寻常的字符感觉很正常，但是那个句号是什么意思？更新：这是因为空间。它是 HTML 中的两个类，而不是一个。
• 当以下字符是数字（例如.padding:.1rem;）时，小句点技巧不起作用。更新：因为以数字开头的类是无效的。
• 如果您使用像这样的属性选择器，则可以避免转义和欺骗 [class*="display: flex;"].
• 这让我想起了 Mathias Bynens 的研究：CSS 字符转义序列。但是……这似乎不再起作用了？我想知道浏览器是否发生了变化，或者工具是否损坏并且不再输出它应该输出的内容（例如 .color\3A \ #f06d06 看起来正确吗？）。

下面是一些示例：

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

/* 这个不匹配，应该出于数字为首这个原因 */
.padding\:.1rem\; {
  padding: 1rem;
}

/* 如果您将它放在属性选择器中，并删除空格所在的句点 (.) 字符，则可行。 */
[class*="padding\: 1rem\;"] {
  padding: 1rem;
}

/* 或者在属性选择器中，去除反斜杠 */
[class*="padding: 1rem;"] {
  padding: 1rem;
}

/* 完全转义. 这个工具说应该是这样的, 但是现在不行了：https://mothereff.in/css-escapes */
.padding\3a \1rem\; {
  background: hotpink;
}

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

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

.color\:.\#00cccc\; {
  color: #00cccc;
}

<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;">一段文本</div>
<div class="display: inline-📦; color: red;">一段文本</div>

<div class="color: #00cccc;">一段文本</div>

代码运行结果：