我试图设置一个精灵菜单，但它总是在所有链接中显示srpite的第一张幻灯片。这是我的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;}
但它总是显示Google+图标，这是精灵中的第一个图标。
我错过了什么？
感谢
您遇到了我所说的选择器分数问题。。由于您的第一个规则#menu-social li a使用ID+element+element，因此它会重载以下规则#link-facebook，只使用ID。
换句话说：
- 对于每个ID值，应用100分
- 对于每个类值（或伪类或属性选择器），应用10分
- 对于每个元素参考，应用1点
试试这个片段：
#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; }
一个简单/优雅的解决方案是将ID更改为类（您不需要那么多ID），如下所示：
#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; }
关于这个问题的更多链接在这里：
- http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
- http://css-tricks.com/specifics-on-css-specificity/
- http://www.htmldog.com/guides/cssadvanced/specificity/