使用正斜杠作为ID属性

Question

刚发现你可以使用(任何？)unicode字符作为ID属性,这为我打开了一个全新的世界.

但我正在尝试将ID属性设置为/name,并且它不想工作.这是我得到的:

http://jsfiddle.net/z2xkm9pr/

#\\/name\\/ {
    display:none;
}
#\\/name\\/:target {
    display: inline-block;
}
#\\/name\\/:target ~ .open {
    display: none;
}

我究竟做错了什么？或者这是不可能实现的？我必须回去使用☠？

另外:在我的最终CSS我[id*='work-']用来选择ID工作的所有div,我该如何使用/ name？

Answer 1

一个id属性值可以根据HTML5和在浏览器实践中,含有除空格字符的任何字符.这给了很多自由,但选择有其成本,因为id属性值可能在HTML之外使用的上下文可能会强加自己的限制和要求.

具体来说,在CSS中,标识符(例如您#在选择器语法中编写的标识符)"只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高,加上连字符( - )和下划线(_); 它们不能以数字,两个连字符或连字符后跟数字开头".其他字符只能使用使用反斜杠\字符的转义符号.

在你的jsfiddle中,HTML属性是id="#\\/name".这意味着属性值以一个#字符开头,后跟两个\字符,后跟一个/字符.所有这些必须逃脱.最简单的方法是在它们每个前面加一个反斜杠,这样选择器就可以了#\#\\\\\/name.

但我认为#价值实际上是一个错字或错误,不应该存在.所以我认为你的代码是这样的:

#\\\\\/name {
    display:none;
}
#\\\\\/name:target {
    display: inline-block;
}
#\\\\\/name:target ~ .open {
    display: none;
}

<div id="wrapper">
    <div id="\\/name">I'm alive!</div>
    <a class="open" href="#\\/name">Open</a>
</div>