escaping selector fun

test.css

div {
    margin: 10px;
    min-height: 20px;
    padding: 2px;
}

span {
    margin: 2px;
}
div {
    background-color: lightgrey;
}
/* Valid */
#\# {
    background-color: cyan;
}
#\. {
    background-color: cyan;
}
#\\ {
    background-color: cyan;
}
#\: {
    background-color: cyan;
}
#\[ {
    background-color: cyan;
}
.\. {
    background-color: cyan;
}
.\# {
    background-color: cyan;
}
/* Invalid */
#\ {
    background-color: yellow;
}
[\[=\]] {
    background-color: yellow;
}
[\]=\=] {
    border: 1px solid red;
}
/* Invalid - no IE */
[\==\=] {
    background-color: red;
    color: #FFF;
}

test.html

<h4>Valid - but weird</h4>

<div id=#>id=#</div>

<div id=.>id=.</div>

<div id=\>id=\</div>

<div id=:>id=:</div>

<div id=[>id=[</div>

<div class=.>class=.</div>

<div class=#>class=#</div>

<hr/>

<h4>Invalid - but somehow working</h4>

<div id=" ">id=" "</div>

<div [=] ]==>[=] ]==</div>

<hr/>

<h4>Invalid - doesn't work in IE</h4>

<div ===>===</div>