.container.\31 25 \25是什么意思在CSS？ [英] What does .container.\31 25\25 mean in CSS?

问题描述

在下面的代码中，我想知道 \ 反斜杠是什么意思？我在我一直在学习的课程中没有遇到反斜杠字符。这段代码用于标识浏览器大小。我相信。

  .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）* / 
} 
  

解决方案

根据规范，

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

在CSS 2.1中，反斜杠（\）字符可以
表示三种类型的字符转义。在CSS注释中，
a反斜杠代表自身，如果反斜杠立即是
，后跟样式表的结尾，它也代表自身
（即DELIM令牌）。

首先，在字符串中，后面跟着换行符的反斜杠被忽略
（即，字符串被认为不包含反斜杠或
newline）。在字符串之外，反斜杠后面跟着一个换行符，其本身为
（即，DELIM后跟换行符）。

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

第三，反斜杠转义允许作者引用他们
不能轻松放入文档的字符。在这种情况下，反斜杠是
后面最多六个十六进制数字（0..9A..F），它代表
的ISO 10646（[ISO10646]）字符，该数字不能为
为零（在CSS 2.1中未定义）如果样式表
确实包含Unicode码点零的字符）。如果范围[0-9a-fA-F]中的字符
跟随十六进制数，则
的结尾有两种方法可以做到：

1. 有一个空格（或其他空格字符）：\\在这种情况下，用户代理应该将CR / LF对（U + 000D / U + 000A）视为
   a单个空格字符。


2. 提供6个十六进制数字：\000026B（& B）

事实上，这两种方法可以组合使用。在十六进制转义后，只有一个空格
字符被忽略。注意，这意味着
在转义序列之后的真实空格必须加倍。

如果数字超出了Unicode允许的范围（例如， \110000
高于当前Unicode允许的最大10FFFF），UA可以用
替换具有替换字符（U + FFFD）的转义。如果要显示
字符，UA应该显示一个可见的符号
，如missing character字形（参见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>< div class =container 25％> 25％< / div>  

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 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) */
}

解决方案

According to the spec,

Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". [...]

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).

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).

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.

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:

1. with a space (or other white space character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.
2. by providing exactly 6 hexadecimal digits: "\000026B" ("&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.

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).

Therefore, the following are equivalent:

.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%"]

Note that escaping is important, otherwise they wouldn't be valid identifiers (emphasis mine):

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

Therefore, the following are invalid:

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

Maybe it may be clearer with this fiddle:

.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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！