CSS 转义 / 反转义
像 CSS.escape() 一样为 CSS 标识符和选择器转义文本，或用于带引号的 CSS 字符串；也可反转义 \HEX 序列。支持数字、表情符号、# 和 .
19 个字符 · 19 字节（UTF-8）
0 个字符 · 0 字节（UTF-8）
完全在浏览器中运行，您的数据不会被上传。
什么是 CSS 转义？
按照 CSSOM 的 CSS.escape() 算法对文本转义，使其可用作 CSS 标识符（选择器中的 id 或 class，例如用于 querySelector），或用作带引号的 CSS 字符串的内容。它也能把 CSS 转义还原为文本。
如何使用 CSS 转义
- 选择转义或反转义。
- 转义时选择上下文：标识符 / 选择器（CSS.escape）或带引号的字符串值；也可选择将非 ASCII 字符转义为 \HEX。
- 在输入中输入 id、class 或字符串，然后复制输出。
示例
0a#b.c
\30 a\#b\.c
何时使用 CSS 转义
只要 id 或 class 可能以数字开头，或包含 .、:、# 或空格等字符，就应使用标识符模式——例如 document.querySelector("#" + CSS.escape(id))。字符串模式用于 content: 的值或字体名称。它不会验证或压缩 CSS。
CSS 转义 的工作原理
标识符模式遵循 CSSOM 第 2.1 节：NUL 变为 U+FFFD；控制字符、开头的数字，或开头连字符之后的数字会变成 \HEX 形式的码位转义；单独的 - 变成 \-；字母、数字、-、_ 和非 ASCII 字符保持不变；其他每个 ASCII 字符都会加上反斜杠（# → \#）。字符串模式用反斜杠转义 \、" 和 '，并将控制字符（包括换行）写成 \HEX 。反转义会读取 \ 加 1–6 位十六进制数字及一个可选的空白，移除被转义的换行，并按字面保留其他被转义的字符。
常见用例
- 选择 id 以数字开头的元素（
#\31 23） - 根据用户生成的类名构建选择器
- 在
content:字符串中书写特殊字符 - 读取工具生成的已转义选择器
常见问题
为什么开头的数字会变成 \3X ？
CSS 标识符不能以数字开头，因此数字会写成它的码位（1 = \31），后面跟一个结束该转义的空格。
这和浏览器的 CSS.escape() 一样吗？
一样，标识符模式实现了同一规范，输出完全相同。
需要转义非 ASCII 字符吗？
不需要，UTF-8 的 CSS 文件可以直接包含它们。该选项适用于仅含 ASCII 的样式表。