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 中使用,還需按對應上下文再做一次轉義。
⚠️ 使用說明與注意事項
📖關於「CSS 字串轉義」 ▼

📝工具簡介

CSS 字串轉義。專為開發者打造的線上工具,純前端執行,程式碼不離開瀏覽器。