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

В приведенном ниже коде мне интересно, что может означать \ обратная косая черта? На уроках, которые я принимал, я не сталкивался с символом обратной косой черты. Я полагаю, этот fragment кода используется для определения размеров браузера.

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

Согласно спецификации ,

Идентификаторы также могут содержать экранированные символы и любой символ ISO 10646 в виде числового кода (см. Следующий элемент). Например, идентификатор «B & W?» может быть записано как «B \ & 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» («& B»). В этом случае пользовательские агенты должны обрабатывать пару «CR / LF» (U + 000D / U + 000A) как один символ пробела.
  2. предоставляя ровно 6 шестнадцатеричных цифр: «\ 000026B» («& B»)

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

Если число выходит за пределы допустимого Unicode диапазона (например, «\ 110000» превышает максимально допустимый 10FFFF в текущем Юникоде), 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 идентификаторы (включая имена элементов, classы и идентификаторы в селекторах ) могут содержать только символы [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) */ } 
 
125%
75%
50%
25%
  • Можно ли использовать подстановочный шаблон CSS в середине селектора атрибутов?
  • Как я могу выбрать элемент с несколькими classами в jQuery?
  • Выберите каждый элемент N в CSS
  • Sass, объединяющий родителя с использованием амперсанда (&) с селекторами типов
  • Есть ли селектор CSS для текстовых узлов?
  • Как использовать JSF сгенерированный идентификатор HTML-элемента с двоеточием «:» в селекторах CSS?
  • Что делает в CSS?
  • Соответствие пустого поля ввода с помощью CSS
  • Как выбрать элемент на основе состояния другого элемента на странице с помощью CSS?
  • Почему .foo a: link, .foo a: visited {} селектор переопределяет: hover, a: active {} селектор в CSS?
  • Обработка двоеточия в идентификаторе элемента в селекторе CSS
  • Давайте будем гением компьютера.