BUG in CSS 3.0?

I'm designing a layout for a blog I'm planning to setup and happen to notice this BUG. I'm not a real genius to CSS knowing all the properties without an API reference, but at least I know how it works. I carefully checked all the rules I've written, because this bug seem to freeze the hover, visited and other states.

What the bug does is that, it will ignore the states you apply on an element. It will remain on the default settings applied to it.

To have that scenario, you must reference your elements in hierarchy by many times. I wrote many CSS rules and access the elements in hierarchy, to get accurate at the cost of writing some element selectors over other. 


When I encountered this bug, I tested it in FF (3.5.5) and Google Chrome (3.0.195.27). Both doesn't accept any rules I add, but once I remove some element.

example:

<div class="gray">
<div class="postButtons">

<a href="#" class="postReadMore" >
<span class="left"></span><span class="linkto">READ MORE</span>
</a>

<a href="#" class="postReadOTH" >
<span class="right"></span><span class="linkto">日本語で読む</span>
</a>
</div>

</div>

.postReadMore,.postReadOTH
{
float:left;
margin:10px;
}

.postReadMore span.linkto, .postReadOTH span.linkto
{
float:left;



}



.gray .postButtons .postReadMore:hover,.gray .postButtons .postReadOTH:hover
{

border-top:solid 1px #CCC;
border-left:solid 1px #CCC;
border-right:ridge 1px #000;
border-bottom:ridge 1px #000;


}

.gray .postButtons .postReadMore:hover .left
{
width:57px;
height:57px;
background: transparent url(../rchImages/sprites.png) no-repeat scroll -274px -202px;

}


.gray .postButtons .postReadOTH:visited .right
{
background: transparent url(../rchImages/sprites.png) no-repeat scroll -274px -202px;

}






.gray .postButtons .postReadMore:visited .left
{
background: transparent url(../rchImages/sprites.png) no-repeat scroll 0px -202px;
}



.gray .postButtons .postReadOTH:hover .right
{
width:57px;
height:57px;
background: transparent url(../rchImages/sprites.png) no-repeat scroll 0px -202px;
}

using these will freeze the .readMore element to default, nothing happens on hover, on visited,

but, once I remove an element to the hierarchy 

FROM

.gray .postButtons .postReadMore:visited .left

{

background: transparent url(../rchImages/sprites.png) no-repeat scroll 0px -202px;

}

TO

.gray  .postReadMore:visited .left

{

background: transparent url(../rchImages/sprites.png) no-repeat scroll 0px -202px;

}

thinks work now... this is not a matter of browsers, since I tried different browser and still it didn't worked. I tried to remove some element in selector, and both works...

I guess there is just a limit to anything.