Javascript CSS类选择器中的转义字符

我试图在CSS类选择器中实现字符转义的描述

我遇到了

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

简短回答：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

正如你们已经知道的，还有更多。然而，这适用于所有人

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

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

• \\31 00\\25

• \\31 0\\30\\25

• \\31\\30 0\\25

• \\31\\30\\30\\25

• \\31\\30\\30\\25

这是一个片段。测试一下。添加类为

0%

的元素，您将看到它们没有被选中。因为DOM解析器会将上述任何选择器转换为

100%

，并将它们与您放入元素的

100%

类相匹配

$（'.\\31\\30\\30\\25>div'）。在（'click'，function（）上{
var位置=[‘第一’、‘第二’、‘第三’]；
警报（'您单击了'+位置[$（this.index（）]+'div.'）；
})

\31 0\30\25>div{
填充：20px；
}
.\31 00\25>*：第一个孩子{
颜色：红色；
}
.\31\30 0\25>*：第n个子项（2）{
颜色：蓝色；
}
.\31\30\30\25>*：最后一个孩子{
颜色：绿色；
}

第一
第二
第三

您正在混淆DOM中的类名和CSS中所需的转义版本。类名只是按原样指定的：

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

在CSS文件（或其他CSS选择器上下文，如

querySelector

）中引用此项时，必须对其进行转义：

.foo\:bar { color: red; }

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

elt.classList.add('1234');

.\31 234 { color: red; }

---

但是，任何转义都不允许在类名中使用空格。空格绝对是为在DOM

className

属性上分隔多个类名而保留的。

我认为您可以使用

class=“abc&；x0020；def”

要解决这个问题

事实上，这是一个复杂的邪恶的混乱局面，如果我问你为什么需要（或想要！）这样做，请记住？这种语法是邪恶的。试着使用

-

或

-

。你可以说“适当的方法是使用破折号”。但是你不应该创建一个粗鲁的评论并给出负号，因为你没有