Мне трудно понять следующий код CSS [duplicate]

Согласно spec ,

Идентификаторы также могут содержать экранированные символы и любой символ ISO 10646 в виде числового кода (см. следующий пункт). Например, идентификатор «B & amp; W?» может быть записано как «B \ & amp; W \?» или "B \ 26 W \ 3F". [...]

В CSS 2.1 символ обратной косой черты (\) может указывать на один из трех типов escape-символов. Внутри комментария CSS обратная косая черта выступает сама по себе, и если обратная косая черта сразу же следует за окончанием таблицы стилей, она также выступает за себя (т. Е. Токен DELIM).

Во-первых, внутри строка, обратная косая черта, сопровождаемая новой строкой, игнорируется (т. е. считается, что строка не содержит обратную косую черту или новую строку). Вне строки обратная косая черта, за которой следует новая строка, выступает за себя (т. Е. DELIM, за которой следует новая строка).

Во-вторых, она отменяет значение специальных символов CSS. Любой символ (кроме шестнадцатеричной цифры, перевода строки, возврата каретки или фида формы) может быть экранирован с помощью обратного слэша, чтобы удалить его особое значение. Например, «\» »представляет собой строку, состоящую из одной двойной кавычки. Препроцессоры таблиц стилей не должны удалять эти обратные косые черты из таблицы стилей, поскольку это может изменить значение таблицы стилей.

В-третьих, экраны обратной косой черты позволяют авторам чтобы ссылаться на символы, которые они не могут легко помещать в документ. В этом случае обратная косая черта сопровождается шестью шестнадцатеричными цифрами (0..9A..F), которые соответствуют символу ISO 10646 ([ISO10646]) с этим число, которое не должно быть равно нулю. (В CSS 2.1 не определено, что произойдет, если таблица стилей содержит символ с нумером Unicode.) Если символ в диапазоне [0-9a-fA-F] следует шестнадцатеричному числу , конец номера должен быть прояснен. Существует два способа сделать это:

1. с пробелом (или другим символом пробела): «\ 26 B» («& amp; B "). В этом случае пользовательские агенты должны обрабатывать пару« CR / LF »(U + 000D / U + 000A) как один символ пробела.
2. , предоставляя ровно 6 шестнадцатеричных цифр: \ 000026B "(" & a mp; B ")

На самом деле эти два метода могут быть объединены. После шестнадцатеричного escape-кода игнорируется только один символ пробела. Обратите внимание, что это означает, что «реальное» пространство после escape-последовательности должно быть удвоено.

Если число выходит за пределы допустимого Unicode диапазона (например, «\ 110000» превышает максимально допустимое значение 10FFFF в текущем Unicode), 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, идентификаторы (включая имена элементов, классы и идентификаторы в селекторах ) могут содержать только символы [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>