使用正斜杠作为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为work-的div，如何使用/name来完成此操作？

- QAW

---

你为什么想要这样做？这会开启什么“新世界”？ - Mike Brant

地址栏里的骷髅头，太过分了！实际上，我正在制作一个单页导航网站，一直在尝试找到一种隐藏地址栏中哈希值的方法。唯一的问题是，一旦这样做，新用户就无法访问该部分。因此，我想将哈希值合并到URL中，并使其看起来体面一些。@MikeBrant - QAW

Answer 1

根据HTML5和浏览器惯例，id属性的值可以包含除空格字符以外的任何字符。这给了我们很多自由，但选择也有代价，因为在HTML之外使用id属性值的上下文可能会施加自己的限制和要求。

具体来说，在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>

- Jukka K. Korpela

---

所以没有办法只使用/name作为ID，并使URL仅显示example.com/#/name。非常感谢您提供如此教育性的答案。正如所说，我刚刚发现了这个功能！（这个网站从未停止给人留下深刻印象）。 - QAW

哦，我没意识到你只想要/name。是的，你可以使用它，并且可以使用href="#/name"。不需要转义。在CSS中，需要转义，例如使用选择器#\/name。 - Jukka K. Korpela

如果我想与 [id*='idname'] 一起使用它，我只需要输入 [id*='/name'] 还是 [id*='\/name']？ - QAW

只需编写[id*='/name']即可，因为此处的/不是标识符的一部分。 - Jukka K. Korpela

我明白了。谢谢你，我的朋友！今天我真的学到了一些东西。 - QAW