Multiple classes does not work if used with pseudo-classes

What steps will reproduce the problem?
1. Create a list of links with unique class names
2. Add a class called "selected" to the first link
3. In your css, style the links so they have a unique hover state when selected

html:
<a href="#" class="first selected">First Link</a>
<a href="#" class="second">Second Link</a>
<a href="#" class="third">Third Link</a>

css:
a { color: black; }

a.first:hover { color: red; }
a.first.selected:hover { color: green; }

a.second:hover { color: blue; }
a.second.selected:hover { color: pink; }

What is the expected output? What do you see instead?
All of the links should be black by default.  Since the first link has the
selected class, it should turn green when you hover over it.  However, it
reverts to the non-chaining behavior native to IE6 and turns pink instead.

What version of the product are you using? On what operating system?
Tested on an original IE6 install on Windows XP running as a virtual
machine.  Using: http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js

Original issue reported on code.google.com by courtew...@gmail.com on 22 Apr 2009 at 4:10

gehuangyi20 / ie7-js

Multiple classes does not work if used with pseudo-classes #173