问题描述
在下面的代码中，我想知道 反斜杠可能意味着什么?在我所学的课程中，我没有遇到反斜杠字符.我相信这段代码是用来识别浏览器大小的.
In the code below, I am wondering what the backslash might mean? I have not encounter the backslash character in the lessons I've been taking. This piece of code is used to identify browser sizes, I believe.
.container.31 2525 {
width: 100%;
max-width: 1500px; /* max-width: (containers * 1.25) */
min-width: 1200px; /* min-width: (containers) */
}
.container.37 525 { /* 75% */
width: 900px; /* width: (containers * 0.75) */
}
.container.35 025 { /* 50% */
width: 600px; /* width: (containers * 0.50) */
}
.container.32 525 { /* 25% */
width: 300px; /* width: (containers * 0.25) */
}
推荐答案
根据规范,
标识符还可以包含转义字符和任何 ISO 10646字符作为数字代码(见下一项).例如，标识符B&W?"可以写成B&W?"或B26 W3F".[...]
在 CSS 2.1 中，反斜杠 () 字符可以表示三种类型的字符转义之一.在 CSS 注释中，反斜杠代表自己，如果反斜杠立即紧随其后的是样式表的结尾，它也代表它自己(即 DELIM 令牌).
In CSS 2.1, a backslash () character can indicate one of three types of character escape. Inside a CSS comment, a backslash stands for itself, and if a backslash is immediately followed by the end of the style sheet, it also stands for itself (i.e., a DELIM token).
首先，在字符串中，后跟换行符的反斜杠被忽略(即，字符串被认为不包含反斜杠或新队).在字符串之外，反斜杠后跟换行符代表为自己(即，一个 DELIM 后跟一个换行符).
First, inside a string, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline). Outside a string, a backslash followed by a newline stands for itself (i.e., a DELIM followed by a newline).
第二，它取消了特殊CSS字符的含义.任何字符(十六进制数字、换行符、回车符或换页)可以用反斜杠转义以删除其特殊的意义.例如，""" 是一个由一个双引号组成的字符串.样式表预处理器不得从样式表，因为那会改变样式表的含义.
Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit, linefeed, carriage return, or form feed) can be escaped with a backslash to remove its special meaning. For example, """ is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning.
第三，反斜杠转义允许作者引用他们所使用的字符不能轻易放入文件中.在这种情况下，反斜杠是后跟最多六个十六进制数字 (0..9A..F)，代表具有该编号的 ISO 10646 ([ISO10646]) 字符，不能为零.(在 CSS 2.1 中未定义如果样式表会发生什么确实包含一个 Unicode 代码点为零的字符.)如果一个字符在 [0-9a-fA-F] 范围内跟随十六进制数，结束这个数字需要说清楚.有两种方法可以做到这一点:
Third, backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:
- 带有空格(或其他空白字符):26 B"(&B").在这种情况下，用户代理应将CR/LF"对 (U+000D/U+000A) 视为单个空格字符.
- 通过准确提供 6 个十六进制数字: 00026B"(&B")
其实这两种方法可以结合使用.只有一个空格十六进制转义后忽略字符.请注意，这意味着转义序列后的真实"空格必须加倍.
In fact, these two methods may be combined. Only one white space character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must be doubled.
如果数字超出 Unicode 允许的范围(例如，110000"高于当前 Unicode 允许的最大 10FFFF)，UA 可以用替换字符"(U+FFFD)替换转义.如果要显示字符，UA 应该显示一个可见的符号，例如缺失字符"字形(参见 15.2，第 5 点).
If the number is outside the range allowed by Unicode (e.g., "110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5).
因此，以下是等价的:
.container.31 2525 <--> .container[class ~= "125%"]
.container.37 525 <--> .container[class ~= "75%"]
.container.35 025 <--> .container[class ~= "50%"]
.container.32 525 <--> .container[class ~= "25%"]
请注意，转义很重要，否则它们将不是有效的标识符(强调我的):
Note that escaping is important, otherwise they wouldn't be valid identifiers (emphasis mine):
在 CSS 中，标识符(包括元素名称、类和 ID选择器) 只能包含字符 [a-zA-Z0-9] 和 ISO 10646字符 U+00A0 及更高，加上连字符 (-) 和下划线(_);它们不能以数字开头、两个连字符或后跟一个连字符一个数字.
因此，以下内容无效:
.container.125%
.container.75%
.container.50%
.container.25%
也许用这个小提琴可能会更清楚:
Maybe it may be clearer with this fiddle:
.container {
background: red;
margin: 10px;
}
.container.31 2525 { /* 125% */
width: 100%;
max-width: 1500px; /* (containers * 1.25) */
min-width: 1200px; /* (containers * 1.00) */
}
.container.37 525 { /* 75% */
width: 900px; /* (containers * 0.75) */
}
.container.35 025 { /* 50% */
width: 600px; /* (containers * 0.50) */
}
.container.32 525 { /* 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 2525 在 CSS 中是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！