CSS Sprite not working | 易学教程

问题

I'm trying to set up a sprite menu but it's always showing first slide of srpite, in all links. This is my CSS:

#menu-social{float: right; width: 175px; margin-top: 5px; list-style-type: none;}
#menu-social li{display: inline-block; margin-right: 8px;}
#menu-social li a{display: block; height: 18px; background: url(images/spr_sociales.png) transparent no-repeat;}

#link-google-plus{width: 30px; background-position: 0 0;}
#link-twitter{width: 21px; background-position-x: -30px; /*or background-position:  0 -30px;*/}
#link-facebook{width: 21px; background-position:  0 -51px;}
#link-tuenti{width: 21px; background-position:  0 -72px;}

But it always shows Google+ icon, which is the first one in the sprite.

What am I missing?

Thank you

回答1:

You're having what I call a selector score issue.. Since your first rule #menu-social li a uses an ID + element + element, it overload the following rules #link-facebook, with only the ID.

In other words:

For each ID value, apply 100 points

For each class value (or pseudo-class or attribute selector), apply 10 points

For each element reference, apply 1 point

Give a try on this snippet:

#menu-social { float: right; width: 175px; margin-top: 5px; list-style-type: none;}
#menu-social li { display: inline-block; margin-right: 8px;}
#menu-social li a { display: block; height: 18px; background: url(images/spr_sociales.png) transparent no-repeat;}

#menu-social li a#link-google-plus { width: 30px; background-position: 0 0; }
#menu-social li a#link-twitter { width: 21px; background-position-x: -30px; /*or background-position:  0 -30px;*/ }
#menu-social li a#link-facebook { width: 21px; background-position:  0 -51px; }
#menu-social li a#link-tuent { width: 21px; background-position:  0 -72px; }

A simple/elegant solution would be to change the IDs to classes (you don't need that much IDs), like this:

#menu-social li a { display: block; height: 18px; background: url(images/spr_sociales.png) transparent no-repeat;}

#menu-social li a.link-google-plus { width: 30px; background-position: 0 0; }
#menu-social li a.link-twitter { width: 21px; background-position-x: -30px; /*or background-position:  0 -30px;*/ }
#menu-social li a.link-facebook { width: 21px; background-position:  0 -51px; }
#menu-social li a.link-tuent { width: 21px; background-position:  0 -72px; }