CSS 类选择器中的转义字符

Question

我正在尝试在 CSS 类选择器中实现this W3 字符转义描述。

我遇到了 abc\20 def 语法的问题，该语法在转义序列后放置一个空格，以确保 def 不会被误读为字符代码的一部分。

具体来说，尝试将 abc\XY def 放入 HTML 类属性或像 jQuery().addClass('abc\\20 def') 这样的命令（这里的 \\ 是 JS 字符串文字语法的一部分；字符串值本身有一个斜杠）都会给出元素两个类，abc\20 和 def。

这种语法是不是执行得不好，我应该坚持使用六位数的前导零形式吗？还是该文档仅引用 CSS 代码中的转义格式，而 HTML 属性/jQuery 参数需要某种不同形式的空格字符转义？

编辑：非常感谢大家的解释！

我现在明白这种语法只适用于 CSS 代码 - 而不是 HTML 属性或 Javascript 中设置的类名本身。

这也意味着指定为空格的字符不能出现在 CSS 类值中，并且没有任何转义机制允许添加它们。 （具体来说，如果我理解正确的话，CSS 选择器.abc\20 def 是有效的，并且选择了类为abc def 的元素，但是没有意义，因为没有任何元素可以拥有这个类。）

对于我的具体用例，涉及将任意值（ 有空格）映射到有效的类名，我需要定义自己的转义方案。用- 或_ 替换空格（感谢Praveen）是一种可能性；如果映射需要是一对一的，则将它们替换为六位 Unicode 十六进制值（例如，"abc def" -> "abc\000020def" 是一种更强大的映射。

要记住的重要一点是，这种替换会影响类名本身——要在 CSS 中引用类 abc\000020def，反斜杠必须再次转义，以形成选择器 .abc\\000020def。

Answer 1

简短回答：DOM 将您传递给它的任何选择器解析为字符串。如果（由 DOM 解析）结果包含空格或不间断空格，它们将被视为类分隔符。

---

您不必担心 jQuery 或任何其他 ECMAScript 会将用于结束转义块的空格误解为类分隔符。

简单地说，因为他们不负责这种匹配。文档对象模型是。解释转义的 CSS 类的同一个 DOM。因此，如果一个转义的类名在您的样式表中有效，那么如果由任何 JavaScript 库传递，它将作为选择器工作。

在一个条件下：它以它可以理解的形式传递给 DOM。 在 CSS 中工作的表单。

现在，让我们假设，出于语义原因，您想在一个元素上使用 100% 类。您至少需要转义第一个和最后一个字符才能使选择器起作用。中间的那些可能会或可能不会逃脱。可能的选择器，都在 DOM 级别转换为 100% 类名，将是：

• .\31 00\25
• .\31 0\30\25
• .\31\30 0\25
• .\31\30\30\25
• .\31 \30 \30 \25

如您所知，还有更多escaping CSS methods。然而，这适用于所有人。

当您将选择器传递给 jQuery 或 JavaScript 时，它会将其视为字符串并将其传递给 DOM 解析器。然而，这些库有自己的转义机制，允许我们做一些花哨的事情。因此，要允许上述任何选择器进入 DOM 解析器，您需要对反斜杠进行转义，这样它们就不会被 JavaScript 误解为转义字符并从字符串中删除。

基本上，您需要将反斜杠加倍。以下任何一种都可以：

• .\\31 00\\25,
• .\\31 0\\30\\25,
• .\\31\\30 0\\25
• .\\31\\30\\30\\25
• .\\31 \\30 \\30 \\25

这是一个sn-p。测试一下。添加带有0% 类的元素，您会看到它们没有被选中。因为 DOM 解析器会将上述任何选择器转换为 100% 并将它们与您放入元素的 100% 类进行匹配。

$('.\\31\\30\\30\\25>div').on('click', function(){
  var positions = ['first','second','third'];
  alert('You clicked the ' + positions[$(this).index()] + ' div.');
})

.\31 0\30\25 > div{
  padding: 20px;
}
.\31 00\25 > *:first-child {
  color: red;
}

.\31\30 0\25 > *:nth-child(2) {
  color: blue;
}
.\31\30\30\25 > *:last-child {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="100%">
        <div>first</div>
        <div>second</div>
        <div>third</div>
    </div>

---

回到您的示例 (abc\\20 def)，它的解析和行为与 abc def 完全相同。 空格，当出现在类名字符串的最终结果中时，将被解释为类分隔符。这适用于\x20 和\xa0（空格和非中断空格），这是预期的行为。

作为一个有趣的（微不足道的）说明，如果出于某种邪恶的原因，您想让人们难以为您的应用程序设计样式，您总是可以在类名中添加一个 command 类型字符。这是一个例子：

$('.space').removeClass('\x73\x70\x61\x63\x65').addClass('\x1a\x73\x70\x61\x63\x65');

.space {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="space">
  inspect me, i should be red!
</div>

Answer 2

您对 DOM 中存在的类名和 CSS 中所需的转义版本感到困惑。类名按原样指定：

elt.classList.add('foo:bar')

只有在 CSS 文件（或其他 CSS 选择器上下文，例如 querySelector）中引用它时，它必须被转义：

.foo\:bar { color: red; }

这同样适用于您选择使用数字转义的情况：

elt.classList.add('1234');

.\31 234 { color: red; }

但是，再多的转义也不允许您在类名中有空格。空格绝对保留用于分隔 DOM className 属性上的多个类名。

Answer 3

我认为你可以使用class="abc def" 来解决这个问题