Что означает .container.\31 25\25 в CSS?

Ответ 1

В соответствии с спецификацией,

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

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

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

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

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

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

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

Если число выходит за пределы допустимого Unicode диапазона (например," \ 110000 "превышает максимально допустимый 10FFFF в текущем Юникоде), UA может замените escape на" символ замены "(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>