什么.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>