使用正斜杠作为ID属性 [英] Using forward slash as ID attribute

问题描述

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

Just discovered that you can use (any?) unicode character as ID attributes, and this opens up a whole new world for my part.

但是我试图将ID属性设置为/name ，但它不起作用.这就是我所拥有的:

But I'm trying to set the ID attribute to /name , and it doesn't want to work. Here's what I've got:

http://jsfiddle.net/z2xkm9pr/

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

我做错了什么?还是这是不可能实现的?我必须回到使用☠吗?

What am I doing wrong? Or is this something impossible to achieve? Do I have to go back to using ☠ ?

也:在我的最终CSS中，我使用 [id * ='work-'] 选择ID为work-的所有div，如何使用/name?

ALSO: In my final CSS I'm using [id*='work-'] to select all divs with the ID work-, how do I use /name for this?

推荐答案

一个 id id 属性值可以包含除空格字符之外的任何字符.这提供了很多自由，但是选择却要付出代价，因为在HTML之外可能使用 id 属性值的上下文可能会施加自己的限制和要求.

An id attribute value may, according to HTML5 and in browser practice, contain any characters except space characters. This gives a lot of liberties, but choices have their cost, since contexts where id attribute values might be used outside HTML may impose their own restrictions and requirements.

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

Specifically, in CSS, an identifier (such as one that you write after # in selector syntax) " can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit". Other characters may be used only using escape notations that use the backslash \ character.

在您的jsfiddle中，HTML属性为 id =#\\/name" .这意味着属性值以一个#字符开头，然后是两个 \ 字符，然后是一个/字符.所有这些都必须逃脱.最简单的方法是在每个参数前面加上反斜杠，因此选择器将是#\#\\\\\//name .

In your jsfiddle, the HTML attribute is id="#\\/name". This means that the attribute value starts with one # character, followed by two \ characters, followed by one / character. All these must be escaped. The simplest way is to precede each of them with a backslash, so the selector would be #\#\\\\\/name.

但是我想值中的#实际上是一个错字或错误，不应该在那里.所以我认为您的代码应该是这样的:

But I suppose that the # in the value is actually a typo or mistake and should not be there. So I think your code was meant to be like this:

#\\\\\/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>

这篇关于使用正斜杠作为ID属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！