Using forward slash as ID attribute

问题

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

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 ☠ ?

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?

回答1:

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.

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.

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>

来源：https://stackoverflow.com/questions/27255591/using-forward-slash-as-id-attribute

标签

html

css

css-selectors