.container。\ 31 25 \ 25在CSS中是什么意思？

Question

在下面的代码中，我想知道\反斜杠可能意味着什么？我上过的课没有遇到反斜杠字符。我相信，这段代码用于识别浏览器的大小。

.container.\31 25\25 {
  width: 100%;
  max-width: 1500px;  /* max-width: (containers * 1.25) */
  min-width: 1200px;  /* min-width: (containers) */
}
.container.\37 5\25 { /* 75% */
  width: 900px;       /* width: (containers * 0.75) */
}
.container.\35 0\25 { /* 50% */
  width: 600px;       /* width: (containers * 0.50) */
}
.container.\32 5\25 { /* 25% */
  width: 300px;       /* width: (containers * 0.25) */
}

Answer 1

根据规范，

标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“ B＆W？” 可以写为“ B \＆W \？” 或“ B
\ 26 W \ 3F”。[…]

在CSS
2.1中，反斜杠（\）字符可以表示三种类型的字符转义符之一。在CSS注释中，反斜杠代表自己，如果在样式表的末尾紧跟一个反斜杠，则它也代表自己（即DELIM标记）。

首先，在字符串中，将忽略反斜杠后跟换行符（即，该字符串被视为不包含反斜杠或换行符）。在字符串的外部，反斜杠代表换行符（即，DELIM和换行符）。

其次，它取消了特殊CSS字符的含义。任何字符（十六进制数字，换行符，回车符或换页符除外）都可以使用反斜杠转义以删除其特殊含义。例如，“
\”“是一个由双引号引起来的字符串。样式表预处理器不得从样式表中删除这些反斜杠，因为这会改变样式表的含义。

第三，反斜杠转义符使作者可以引用他们不容易放入文档中的字符。在这种情况下，反斜杠后面最多包含六个十六进制数字（0..9A..F），代表具有该数字的ISO
10646（[ISO10646]）字符，该数字不能为零。（在CSS
2.1中未定义，如果样式表确实包含Unicode码为零的字符，会发生什么。）如果范围[0-9a-fA-F]内的字符跟随十六进制数，则该数字的末尾需要弄清楚。有两种方法可以做到这一点：

1. 带有空格（或其他空格字符）：“ \ 26 B”（“＆B”）。在这种情况下，用户代理应将“ CR / LF”对（U + 000D / U +
   000A）视为单个空格字符。
2. 通过提供恰好6个十六进制数字：“ \ 000026B”（“＆B”）
   

实际上，这两种方法可以结合使用。十六进制转义后，仅忽略一个空格字符。请注意，这意味着转义序列后的“实际”空间必须加倍。

如果数字超出Unicode允许的范围（例如，“ \ 110000”大于当前Unicode允许的最大10FFFF），则UA可以使用“替换字符”（U +
FFFD）替换转义符。如果要显示字符，则UA应该显示可见的符号，例如“缺少字符”字形（参见15.2，第5点）。

因此，以下是等效的：

.container.\31 25\25   <-->   .container[class ~= "125%"]
.container.\37 5\25    <-->   .container[class ~= "75%"]
.container.\35 0\25    <-->   .container[class ~= "50%"]
.container.\32 5\25    <-->   .container[class ~= "25%"]

请注意，转义很重要，否则它们将不是有效的标识符（强调我的）：

在CSS中， 标识符 （包括选择器中的元素名称，类和ID
）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，以及连字符（-）和下划线（ _）; 它们 不能以数字
，两个连字符或以数字开头的连字符开头。

因此，以下内容无效：

.container.125%
.container.75%
.container.50%
.container.25%

也许这个小提琴可能更清楚：

.container {

  background: red;

  margin: 10px;

}

.container.\31 25\25 { /* 125% */

  width: 100%;

  max-width: 1500px;  /* (containers * 1.25) */

  min-width: 1200px;  /* (containers * 1.00) */

}

.container.\37 5\25 { /* 75% */

  width: 900px;       /* (containers * 0.75) */

}

.container.\35 0\25 { /* 50% */

  width: 600px;       /* (containers * 0.50) */

}

.container.\32 5\25 { /* 25% */

  width: 300px;       /* (containers * 0.25) */

}


<div class="container 125%">125%</div>

<div class="container 75%">75%</div>

<div class="container 50%">50%</div>

<div class="container 25%">25%</div>