反斜杠的两种含义
CSS 的转义统一由一个反斜杠引导，按后面跟什么分两种情形：跟普通字符时就是该字符本身，用于让特殊符号失去语法含义；跟十六进制数字时表示一个码点，最多取 6 位十六进制并允许用一个空白字符收尾。它同时服务于标识符（类名、ID、属性值）和字符串字面量两种上下文，规则细节以 CSS Syntax 规范为准。
基本信息
| 字符转义 | 反斜杠加一个非十六进制字符，表示该字符本身，如 \. 表示点号 |
|---|---|
| 码点转义 | 反斜杠加 1 到 6 位十六进制，可跟一个空白作为结束符，如 \31 表示数字 1 |
| 十六进制大小写 | 不敏感，\41 与 \a 大小写等价 |
| 字符串中的换行 | 反斜杠加真实换行表示续行，换行本身被吃掉 |
| 合法范围 | 码点上限为 U+10FFFF，空字符会被替换为 U+FFFD |
典型使用场景
- 纯数字或含特殊符号的类名无法直接写选择器，必须转义
- 在 content 属性里显示引号、箭头、中文标点等字符
- 框架生成的类名含斜杠、井号（如 Tailwind 的任意值语法）时需要转义
- JS 模板字符串里拼接选择器，反斜杠要按层翻倍
- 做样式回归测试，用确定的转义形式避免选择器写法歧义
写法示例
写法示例
/* 类名是 123，选择器必须转义首字符 */
.\31 23 { color: red; }
/* 十六进制码点：U+2002 与左引号 */
.bullet::before { content: "\2002"; }
.quote::before { content: "\201C"; }
/* 特殊字符转义：井号、点号、斜杠 */
#\#hash { display: block; }
.c\/d { display: block; }
/* JS 里拼接选择器，反斜杠翻倍 */
const sel = '.' + CSS.escape(userInput); /* 优先用内建 API */转义与结果对照
| 写法 | 含义 | 常见误写 |
|---|---|---|
| \31 23 | 类名 123，先码点后跟空格结束 | \3123 会被当成一个码点 U+3123 |
| \. | 点号字符，不再作为类选择器开头 | 写成 .\. 反而多了一层 |
| \2002 | U+2002 半角空格，比 更明确 | 少写前导零导致位数不足 |
| \; | 分号字符，属性选择器里常见 | 在属性值里反斜杠要按字符串规则处理 |
| \" | 字符串中的双引号 | 在单引号字符串里反而多余 |
浏览器提供 CSS.escape()，用它处理来自用户或数据的外部类名最稳妥；手工拼转义容易漏掉第二个字符是数字或连字符的场景，规则细节请以官方文档为准。
把 CSS 写进 HTML 的 style 标签时，内容里出现 </style> 会提前结束样式块；写进 JS 字符串时反斜杠还要再翻一倍。同一份样式在 CSS 文件、JS 字符串、HTML 内联三个位置需要不同层数的转义。