Css bug: a strange phenomenon in IE6!

First, I declare that xpoint, a colleague of mine, encountered this problem, not the first employee. If you don't say this, I'm sure I will be stunned... when ID and Class are combined, they will not be displayed normally in IE6.
CSS code:

The code is as follows:	Copy code
# F {font-size: 20px} # F. a {color: red ;} # F. B {color: black; font-size: 50px} # F. c {color: blue ;} # F. d {color: orange ;}

HTML code:

The code is as follows:	Copy code
<Div id = "f" class = "a"> a </div> <Div id = "f" class = "B"> B </div> <Div id = "f" class = "c"> c </div> <Div id = "f" class = "d"> d </div>

Imagine what IE will interpret it?
See the following running results:

The code is as follows:	Copy code
# F {font-size: 20px} # F. a {color: red ;} # F. B {color: black; font-size: 50px} # F. c {color: blue ;} # F. d {color: orange ;} A B C D

[You can modify some code before running it to view the effect]
In fact, IE6 only recognizes the # f. a {color: red;} sentence, and the last three sentences are ignored.
We have to say that we are speechless and do not understand this.
(This phenomenon is normal in Firefox, Opera, and IE5)