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

В CSS идентификаторы могут содержать специальные символы, например обратная косая черта (). Символ обратной косой черты служит разным целям в CSS, в зависимости от контекста.

Эскейп-символы

Внутри строки обратная косая черта, за которой следует перевод строки, игнорируется. Вне строки обратная косая черта, за которой следует символ новой строки, представляет себя.

Экранирование специальных символов

Обратная косая черта может использоваться для экранирования специальных символов CSS, в результате чего они теряют свое особое значение. значение. Например, двойная кавычка ("") внутри строки может быть экранирована как \".

Ссылки на символы Юникода

Обратная косая черта, за которой следует до шести шестнадцатеричных цифр ( 0-9a-fA-F) представляет символ ISO 10646 с этим номером. Для завершения ссылки используется пробел или дополнительная шестнадцатеричная цифра.

В данном коде обратная косая черта () используется для представления процентного значения в имени класса элемента .container:

.container.\31 25\25 { /* 125% */
  width: 100%;
}

Специальные символы \31, 25 и \25 представляют собой шестнадцатеричные числа для символов «1», «%» и «%» соответственно. Следовательно, этот код эквивалентен:

.container[class ~= "125%"] { /* 125% */
  width: 100%;
}

Этот селектор классов соответствует любому элементу, класс которого содержит «125%». Расчет ширины элемента выглядит следующим образом:

width = (containers * 125%)