Presque personne ne sait vraiment pourquoi certains styles css s'appliquent plutôt que d'autres lorsque deux styles ciblent un même élément. Par exemple, pourquoi le célèbre

a {color:white}
a:hover {color:red}

est-il rouge au survol? Un lien même survolé reste un lien, il pourrait donc très bien rester blanc. Cela parait être d'une logique implacable, mais qu'en est-il quand une ligne de liste stylée par une classe est définie par un id, ou quand une balise contient un id et une classe aux styles contradictoires? Il existe un petit calcul très simple:

Selector Rules: Calculating Specificity

Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

  1. Count the number of ID attributes in the selector.
  2. Count the number of CLASS attributes in the selector.
  3. Count the number of HTML tag names in the selector.

Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity: 

#id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */

Order of Specification

To make it easy, when two rules have the same weight, the last rule specified wins.

Pour ceux qui ne maitrise pas la langue de Mister Bean, dans votre déclaration, comptez une centaine pour un id, une dizaine pour une classe et une unité pour une balise. Quand deux déclarations ont la même priorité, la dernière l'emporte.
http://www.htmlhelp.com/reference/css/structure.html

Un petit exemple pratique maintenant, tiré du célèbre site csszengarden.com
Orchid by Jakob Nilsson

Observons maintenant le css du menu:

#lselect ul li {background-position:0px 0px;}
#lselect ul li:hover {background-position:0px -200px;}
#lselect ul li + li {background-position:0px -25px;}
#lselect ul li+li:hover {background-position:0px -225px;}
#lselect ul li + li + li {background-position:0px -50px;}
#lselect ul li+li+li:hover {background-position:0px -250px;}
#lselect ul li+li+li+li {background-position:0px -75px;}
#lselect ul li+li+li+li:hover {background-position:0px -275px;}
#lselect ul li+li+li+li+li{background-position:0px -100px;}
#lselect ul li+li+li+li+li:hover {background-position:0px -300px;}
#lselect ul li+li+li+li+li+li{background-position:0px -125px;}
#lselect ul li+li+li+li+li+li:hover {background-position:0px -325px;}
#lselect ul li+li+li+li+li+li+li{background-position:0px -150px;}
#lselect ul li+li+li+li+li+li+li:hover {background-position:0px -350px;}
#lselect ul li+li+li+li+li+li+li+li{background-position:0px -175px;}
#lselect ul li+li+li+li+li+li+li+li:hover {background-position:0px -375px;}

Les différents <li> successifs de la liste sont sélectionnés spécifiquement en utilisant uniquement les règles de priorités pour abtenir l'effet de rollover par déplacement du fond du block (qui n'est qu'un seul gros jpg pour tout le menu)