css-我从未见过的css编码

我正在研究一个名为zerofour的免费css模板，该模板是在上找到的，并且正在运行一个我以前从未见过的css编码。在HTML中，有些div有“4u”之类的类，但当我检查css文件时，这是唯一一个包含这些术语的文本部分，看起来如下所示：

/* Grid */

/* Cells */

    .\31 2u { width: 100% }
    .\31 1u { width: 91.6666666667% }
    .\31 0u { width: 83.3333333333% }
    .\39 u { width: 75% }
    .\38 u { width: 66.6666666667% }
    .\37 u { width: 58.3333333333% }
    .\36 u { width: 50% }
    .\35 u { width: 41.6666666667% }
    .\34 u { width: 33.3333333333% }
    .\33 u { width: 25% }
    .\32 u { width: 16.6666666667% }
    .\31 u { width: 8.3333333333% }
    .\-11u { margin-left: 91.6666666667% }
    .\-10u { margin-left: 83.3333333333% }
    .\-9u { margin-left: 75% }
    .\-8u { margin-left: 66.6666666667% }
    .\-7u { margin-left: 58.3333333333% }
    .\-6u { margin-left: 50% }
    .\-5u { margin-left: 41.6666666667% }
    .\-4u { margin-left: 33.3333333333% }
    .\-3u { margin-left: 25% }
    .\-2u { margin-left: 16.6666666667% }
    .\-1u { margin-left: 8.3333333333% }

---

当我使用ChromeDeveloper删除4u类时，页面会受到影响。但是，当我从css文件中删除这个部分时，什么也没有发生。我在这件事上被难住了，真的很烦

我认为这种类型的css用于移动兼容性。

这是我第一次看到这样的类名，我想知道它的含义。W3C网页上说：

在CSS 2.1中，反斜杠（

\

）字符可以表示三种类型之一 角色逃逸。在CSS注释中，反斜杠表示 如果反斜杠后面紧跟着 样式表，它也代表它自己（即DELIM标记）。第一， 在字符串中，将忽略后跟换行符的反斜杠（即。， 字符串被视为不包含反斜杠或 新行）。在一个字符串外，一个反斜杠后跟一个换行符 为自己（即，一个DELIM后面跟着一个新行）

第二，它取消了特殊CSS字符的含义。任何 字符（十六进制数字、换行符、回车符或 表单提要）可以使用反斜杠转义以删除其特殊属性 意思例如，

“\”

是由一个双引号组成的字符串。 样式表预处理器不得从样式表中删除这些反斜杠 样式表，因为这将更改样式表的含义

第三，反斜杠转义允许作者引用他们需要的字符 无法轻松放入文档。在这种情况下，反斜杠为 后跟最多六个十六进制数字（

0..9A..F

），表示 带有该数字的ISO10646（[ISO10646]）字符，该数字不能为 为零。（在CSS 2.1中未定义，如果样式表 是否包含Unicode代码点为零的字符。）如果 在范围

[0-9a-fA-F]

中，十六进制数后面是 需要明确数字。有两种方法可以做到这一点： 带有空格（或其他空白字符）：

\26 B

（

&B

）[…]

注意：反斜杠转义始终被视为 标识符或字符串（即

\7B

不是标点符号，即使

{

是，并且

\32

允许在类名的开头，即使

2

不是）。标识符

te\st

与

测试

---

据我所知，这里的

\3

+数字+空格部分只能用作类名。

请阅读此规范：。反斜杠后面的字符表示unicode代码点。如果允许下一个字符作为十六进制值的一部分，则需要空格。

看起来像是我对HTML5UP也是新的，但这是我的猜测。它通常是如何工作的（至少在基础上），你有一个“行”，它是你的页面的整个宽度（通常）。在这一行中，你有列（或“U”）。一般来说，每根柱子的宽度都是相同的。通常地基的标准是12列/排，我猜这里是一样的。所以，基本上，如果你想把第一排50%排成一个巨大的DIV，然后用两个分叉剩下的50%，它看起来就好像：

<div class="row">
  <div class="6u">
    Big Div Here.
  </div>

  <div class="3u">
    Small Div Here.
  </div>

  <div class="3u">
    Small Div here (same size as the other small div)>
  </div>
</div>  (This ends the row).

这里有个大Div。
这里有一个小房间。
此处的小Div（与其他小Div大小相同）>
（该行到此结束）。

<> P.>所有这些疯狂的原因使得你的页面变得更容易响应（这是基础和HTML5UP的要点之一）。

---

查看基金会的开发文档以获得更深入的解释和其他示例（尽管它不一定是基金会的）

html5up.net使用一个名为skel的框架使布局具有响应性

---

如果你的问题是“我如何理解这些类”，而不是“这些转义序列如何工作？”"，然后您要查找的参考是。

检查生成的任何脚本文件中是否存在类。就是这样！我找到了类js/skel.min.js，我不知道可以从javascript中获取类。看起来像是要学习的更多内容，一如既往。谢谢！这些是用于创建基于网格的布局的帮助类，现在已经广泛使用。它们有很大的帮助，在桌面和移动设备上都可以使用。正如引用的文本所述，例如，

\31

指的是编码为31的十六进制Unicode字符，即数字“1”。没有单独的

\3

部分（但数字恰好有30到39的编码）。符号

\-

指的是连字符“-”，在此上下文中需要转义；请参阅@JukkaK.Korpela感谢您的澄清，Jukka，我已编辑了我的答案以重新措辞。