CSS の「.container.\31 25\25」のバックスラッシュ文字の目的は何ですか?

提供された CSS コードでは、バックスラッシュ文字 () は、識別子のエスケープに関連する特定の目的を果たします。 CSS 仕様によると:

• 特殊文字のエスケープ: バックスラッシュは CSS 特殊文字の意味を取り消すことができます。この場合、パーセント記号 (%) が CSS 計算の開始として認識されるのを防ぎます。
• 数値コード ポイント参照: 6 つの 16 進数が後に続く場合、バックスラッシュを使用できます。特定の Unicode 文字を表します。これにより、作成者はドキュメントに簡単に入力できない文字を参照できます。

例では:

.container.\31 25\25 は .container[class と同等です。 ~= "125%"].

• 31 は数値の 16 進数表現です。 1.
• 25 は、数値 17 の 16 進表現です。
• \25 は、特別な意味を取り除くためにエスケープされたパーセント記号です。

したがって、バックスラッシュはパーセント記号をエスケープし、計算ではなく識別子の一部として扱うことができます。この手法により、「125%」値が計算ではなくクラス名として解釈されるようになります。

バックスラッシュがないと、識別子は数字で始まり、CSS 構文に従って無効になります。

• .container.125% は、識別子を数字で始めることができないため無効です。

バックスラッシュを使用すると、パーセント値をクラス名として使用でき、コンテナーのサイズに基づいた柔軟なスタイル設定が可能になります。