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

Question

在下面的代码中，我想知道 \ 反斜杠是什么意思？在我上过的类(class)中，我没有遇到过反斜杠字符。我相信这段代码是用来识别浏览器大小的。

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

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

因此，以下是等价的:

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

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

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.

因此，以下内容无效:

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

也许用这个 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>