Q:

What does .container.\31 25\25 mean in CSS?

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

A:

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:

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

