CSS Sprite не работает

Question

Я пытаюсь настроить меню спрайтов, но оно всегда показывает первый слайд 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+, который является первым в спрайте.

Что мне не хватает?

Спасибо

Answer 1

У вас есть то, что я называю оценкой выбора проблема .. Поскольку ваше первое правило #menu-social li a использует ID + элемент + элемент , оно перегружает следующие правила #link-facebook только с идентификатором.

Другими словами:

• Для каждого значения идентификатора применять 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; }

Простым / элегантным решением было бы изменить идентификаторы на классы (вам не нужно так много идентификаторов), например:

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

Больше ссылок по этому вопросу здесь:

1. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
2. http://css -tricks.com / Специфические-на-CSS-специфичностью /
3. http://www.htmldog.com/guides/cssadvanced/specificity/