Qual é o propósito do caractere de barra invertida em ".container.\31 25\25" do CSS?

No código CSS fornecido, o caractere de barra invertida () serve a um propósito específico relacionado ao escape do identificador. De acordo com a especificação CSS:

• Escapando caracteres especiais: Uma barra invertida pode cancelar o significado de caracteres CSS especiais. Neste caso, evita que o sinal de porcentagem (%) seja reconhecido como o início de um cálculo CSS.
• Referências de pontos de código numérico: Quando seguido por seis dígitos hexadecimais, uma barra invertida pode representam um caractere Unicode específico. Isso permite que os autores se refiram a caracteres que não são facilmente inseridos no documento.

No exemplo:

.container.\31 25\25 é equivalente a .container[class ~= "125%"].

• 31 é a representação hexadecimal do número 1.
• 25 é o representação hexadecimal do número 17.
• \25 é o sinal de porcentagem, escapado para remover seu significado especial.

Portanto, a barra invertida escapa do sinal de porcentagem, permitindo que ele seja tratado como parte do identificador em vez de um cálculo. Essa técnica garante que o valor "125%" seja interpretado como um nome de classe em vez de um cálculo.

Sem a barra invertida, o identificador começaria com um número e seria inválido de acordo com a sintaxe CSS:

• .container.125% é inválido porque os identificadores não podem começar com um número.

Ao usar a barra invertida, os valores percentuais podem ser usados ​​como nomes de classes, permitindo um estilo flexível com base nos tamanhos dos contêineres.