CSS Sprite不工作 [英] CSS Sprite not working

问题描述

我想设置一个sprite菜单，但它总是显示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; / *或background-position：0 -30px; * /} 
＃link-facebook {width：21px; background-position：0 -51px;} 
＃link-tuenti {width：21px; background-position：0 -72px;} 
  

但它总是显示Google+图标，

谢谢

div class =h2_lin>解决方案

你有我所谓的选择器得分问题..自从你的第一个规则＃menu- social li a 使用 ID +元素+元素，它会覆盖以下规则＃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; / *或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： 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; / *或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; } 
  

此问题的更多链接：

1. http ：//coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/


2. http://css-tricks.com/specifics-on-css-specificity/


3. http://www.htmldog.com/guides/cssadvanced/specificity/

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

解决方案

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; }

More links on this issue here:

1. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
2. http://css-tricks.com/specifics-on-css-specificity/
3. http://www.htmldog.com/guides/cssadvanced/specificity/

这篇关于CSS Sprite不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！