迹忆客 专注技术分享

当为带有奇怪的类或 id 属性值的标记编写 CSS 时，我们需要考虑一些规则。 例如，你不能只使用 ## { color: #f00; } 以 id="#" 为目标元素。 相反，我们必须转义奇怪的字符（在本例中为第二个 #）。 这样做会取消标识符中特殊 CSS 字符的含义，并允许我们引用无法轻易输入的字符，例如疯狂的 Unicode 符号。

在其他一些情况下，我们可能想要或需要在 CSS 中转义字符。 例如，我们可以为时髦的 id、类、属性或属性值编写选择器； 或者你可能想使用 content 属性插入一些奇怪的字符而不改变你的 CSS 文件的字符编码。

CSS 中的标识符和字符串

更新 ：CSS 标识符语法已更改，以更好地与 HTML 保持一致。 由于历史原因，本节的其余部分保留在这里，描述的是旧规范——而不是最新规范！

该规范使用令牌图定义标识符。 它们可能包含从 a 到 z、从 A 到 Z、从 0 到 9 的符号、下划线 (_)、连字符 -、非 ASCII 符号或任何符号的转义序列。 它们不能以数字或连字符 - 开头，后跟数字。 标识符至少需要一个符号（即空字符串不是有效标识符）。

标识符的语法在整个规范中用于各种事物，包括元素名称、类名称和选择器中的 ID。

字符串的规范定义说字符串可以用双引号或单引号书写。 双引号不能出现在双引号内，除非进行转义（例如，作为 '\"' 或 '\22'）。单引号也是如此（例如，"\'" 或 "\27"）。字符串不能直接 包含换行符。要在字符串中包含换行符，请使用表示换行符 (U+000A) 的转义序列，例如“\A ”或“\00000a ”。换行符也可以表示为“**\D \A ** " (CRLF)、"**\D ** "（即其他语言中的 \r）或 "**\C ** "（即其他语言中的 \f）。出于美观或其他原因，可以将字符串分成几行，但在这种情况下 在这种情况下，换行符本身必须使用反斜杠 (\) 进行转义。

如大家所见，标识符和字符串中都允许字符转义。 那么，让我们看看这些转义序列是如何工作的！

如何转义CSS中的任何字符

这是在 CSS 中转义字符时应牢记的简单规则列表。 请记住，如果我们正在为给定的类名或 ID 编写选择器，则适用标识符的严格语法。 如果你在 CSS 中使用（带引号的）字符串，你只需要转义引号或换行符。

前导数字

如果标识符的第一个字符是数字，则需要根据其 Unicode 代码点对其进行转义。 例如，字符 1 的代码点是 U+0031，因此您可以将其转义为 \000031 或 \31 。

基本上，要转义任何数字字符，只需在其前面加上 \3 并附加一个空格字符 ( )。 耶 Unicode！

CSS 中的特殊字符

任何不是十六进制数字、换行符、回车符或换页符的字符都可以用反斜杠转义以删除其特殊含义。

以下字符在 CSS 中具有特殊含义：!, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?、@、[、\ 、]、^、`、{、|、} 和 ~。

如果要使用它们，有两个选项。 要么你使用 Unicode 代码点——例如，加号 + 是 U+002B，所以如果你想在 CSS 选择器中使用它，你可以将它转义为 \2b（注意末尾的空格字符 ) 或 \00002b（正好使用六个十六进制数字）。

不过，第二个选项要优雅得多：只需使用反斜杠 \ 转义字符，例如 + 会转义为 \+。

理论上，: 字符可以转义为 \:，但 IE < 8 无法正确识别该转义序列。 解决方法是改用 \3A。

空白字符

空格——甚至是一些在 HTML 属性值中技术上无效的字符——也可以被转义。

匹配 [\t\n\v\f\r] 的任何字符都需要根据其 Unicode 代码点进行转义。 空格字符 ( ) 可以简单地反斜杠 (\)。 其他空白字符不需要转义。

下划线

CSS 不要求你转义下划线 (_)，但如果它出现在标识符的开头，我建议无论如何都要这样做，以防止 IE6 完全忽略该规则。

其他 Unicode 字符

除此之外，在 CSS 中不可能传达任何意义的字符（例如 ♥）可以而且应该只使用未转义的字符。

理论上（根据规范），任何字符都可以根据其 Unicode 代码点进行转义，如上文所述（例如，对于𝌆，U+1D306“中心四角”符号：\1d306 或 \01d306），但较旧的 WebKit 浏览器 不支持 BMP 以外字符的这种语法（2012 年 4 月修复）。

由于浏览器错误，还有另一种（非标准）方法来转义这些字符，即通过将它们分解为 UTF-16 代码单元（例如 \d834\df06 ），但 Gecko 不支持这种语法（理所当然） 和歌剧 12。

由于目前没有办法在不破坏与旧浏览器的向后兼容性的情况下以跨浏览器的方式转义非 BMP 符号，因此最好只使用这些未转义的字符。

十六进制转义序列后的尾随空格

紧跟在十六进制转义序列之后的任何 U+0020 空格字符都会被转义序列自动消耗掉。 例如，要对文本 foo © bar 进行转义，我们必须使用 foo \A9 bar，并在 \A9 后面加上两个空格字符。 第一个空格字符被吞下； 仅保留第二个。

仅当下一个字符不是另一个空格字符且不是十六进制数字时，才能省略十六进制转义序列后面的空格字符。 例如，foo©bar 变成 foo\A9 bar，但 foo©qux 可以写成 foo\A9qux。

示例

以下是一些随机示例来说明这一点：

.\3A \`\( { } /* matches elements with class=":`(" */
.\31 a2b3c { } /* matches elements with class="1a2b3c" */
#\#fake-id {} /* matches the element with id="#fake-id" */
#-a-b-c- {} /* matches the element with id="-a-b-c-" */
#© { } /* matches the element with id="©" */

……那么 JavaScript 呢？

在 JavaScript 中，这取决于。

document.getElementById() 和 document.getElementsByClassName() 等类似函数可以只使用未转义的属性值，就像它在 HTML 中的使用方式一样。 当然，我们必须转义任何引号，这样我们仍然可以得到有效的 JavaScript 字符串。

另一方面，如果我们要将这些选择器与 Selectors API（即 document.querySelector() 和 document.querySelectorAll()）或依赖相同语法的库（例如 jQuery/Sizzle）一起使用，则必须采取 转义的 CSS 选择器并再次转义它们。 我们真正需要做的就是将 CSS 选择器中的每个反斜杠加倍（当然，必要时还要转义引号）：

HTML

<p class=":`("></p>

CSS

.\3A \`\( { }

JavaScript

document.getElementsByClassName(':`(');
document.querySelectorAll('.\\3A \\`\\(');