转义CSS类选择器中的字符

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

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

具体来说,尝试放入abc\XY defHTML类属性或类似命令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" 是一个更强大的值).

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

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

如您所知,还有更多转义的CSS方法.但是,这适用于所有人.

当您将选择器传递给jQuery或JavaScript时,它会将其视为字符串并将其传递给DOM解析器.但是,这些库有自己的转义机制,允许我们做一些奇特的东西.所以,为了让上述任何选择的,使其向你需要躲避反斜杠DOM解析器,所以它们不会被误解的JavaScript作为转义字符和字符串从取出.

基本上你需要加倍你的反斜杠.以下任何一项都可以:

.\\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').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;
}

    

        
first
        
second
        
third
    

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

.foo\:bar { color: red; }

elt.classList.add('1234');

.\31 234 { color: red; }