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

根据spec，

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

在CSS 2.1中，反斜杠（\）字符可以   表示三种类型的角色逃脱中的一种。在CSS评论中，   反斜杠代表自己，如果立即反斜杠   其次是样式表的结尾，它也代表了自己   （即DELIM令牌）。

首先，在字符串内部，将忽略换行符后跟换行符   （即，该字符串被认为不包含反斜杠或   新队）。在字符串之外，反斜杠后跟换行符   本身（即DELIM后跟换行符）。

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

第三，反斜杠转义允许作者引用它们的字符   不能轻易放入文件。在这种情况下，反斜杠是   其次是最多六个十六进制数字（0..9A..F），代表   带有该号码的ISO 10646（[ISO10646]）字符，但不得   为零。（在CSS 2.1中未定义如果样式表会发生什么   确实包含Unicode代码点为零的字符。）如果是一个字符   在[0-9a-fA-F]范围内，跟随十六进制数，结束   这个数字需要明确。有两种方法可以做到这一点：


带空格（或其他空格字符）：“\ 26 B”（“＆amp; B”）。在这种情况下，用户代理应将“CR / LF”对（U + 000D / U + 000A）视为   一个空白字符。

提供正好6个十六进制数字：“\ 000026B”（“＆amp; B”）

实际上，这两种方法可以结合起来。只有一个白色空间   在十六进制转义后，将忽略字符。请注意，这意味着   转义序列之后的“真实”空间必须加倍。

如果数字超出Unicode允许的范围（例如“\ 110000”）   UA可能高于当前Unicode允许的最大10FFFF   用“替换字符”（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） selectors）只能包含字符[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>

什么.container。\ 31 25 \ 25在CSS中意味着什么？

1 个答案: