Zebra stripping simple css issue

I was making a table rows with zebra stripping style. With the features that, hovering a rows, will change the row color. But, surprisingly my code wasn't working while my js code was perfect like follows:

$(document).ready(function(){
$('.strip tr').mouseover(function(){
$(this).addClass('over');
})
$('.strip tr').mouseout(function(){
$(this).removeClass('over');
});
$('.strip tr:even').addClass('even');
});

the style was as follows:

tr.over td{
background:#993399;
}

tr.even td{
background:#e9e1cb;
}

it caused me headache , why isn't working. At last, i found the problem. this is . "MY CSS STYLE ORDER WASN'T CORRECT". That means, when a jquery function is calling like $('.strip tr:even').addClass('even'), it assigns the class & then render all styles associated with this element. And as css is rendered in interpretation mode(last style shows always among all conflicting styles), so, every time mouse is over a row, it is assigning the class 'over' & then renders the style-sheet, as a result styles of 'even' class is rendering last & getting that style always & the hovering effect wasn't showing at all. just by reversing the style-sheet as follows:
tr.even td{
background:#e9e1cb;
}
tr.over td{
background:#993399;
}

gives the expected result. This reminds me & taught me a lession that we also always need to be aware of styles ordering.