CSS 字符串转义 - 免费在线开发工具

← ToolBox / CSS 字符串转义

🔤 CSS String Escape

Escape CSS identifiers and selectors in your browser so special characters don't break your stylesheets.

📐 工作原理与说明

为 CSS 选择器或字符串中的特殊字符做转义。

标识符：CSS 中用反斜杠转义特殊字符，或写成 \XXXXXX （十六进制码点 + 空格）。
字符串值：用引号包裹，内部引号需转义。
场景：class/id 含 . : # 等字符时，需在 querySelector 中正确转义。
原生 API：浏览器提供 CSS.escape()，可完成同样的转义工作。

输入输出结果

📖 说明

标识符模式: 用于类名、ID，转义后可直接放在 CSS 选择器中。

字符串模式: 用于 content: "" 等字符串，转义引号和换行。

📚 深度解析：CSS 字符串转义

💡 常见使用场景

在 CSS content、选择器里嵌入特殊字符或 Unicode。
处理动态选择器：类名含冒号、点号或以数字开头时，用转义后的形式拼接 querySelector，否则选择器会被判为非法。

转义

输入含换行 → 输出 `"line1\A line2"`（\A 表示换行）。

❓ 常见问题（FAQ）

选择器里的点号要转义吗？: 类选择器中 . 需转义为 \. 否则被当作类分隔。
CSS.escape 和手写转义有什么区别？: CSS.escape 按规范处理全部边界情况（前导数字、连字符后跟数字、控制字符、非 ASCII 等），手写替换很容易漏。注意它返回的是「可直接用于选择器的标识符」，若要在字符串字面量或 URL 中使用，还需按对应上下文再做一次转义。

⚠️ 使用说明与注意事项

本工具纯前端运行，数据不会上传到服务器
建议在主流浏览器（Chrome/Safari/Firefox/Edge）中使用
计算结果仅供参考，请以实际应用场景为准

📖关于「CSS 字符串转义」 ▼

📝工具简介

CSS 字符串转义。专为开发者打造的在线工具，纯前端运行，代码不离开浏览器。