Попытка получить Sprite работать - CSS

Question

Просто пытаюсь получить очень простой спрайт работать: Example

То, что я пытаюсь сделать, это переключение между «набор» и «неустановленные» жирным/курсивом иконки, которые в первом и втором строках моего спрайта (соответственно).

<a id="bold" class="disabled"></a>  
<a id="italic"></a> 

код, кажется, не обращая внимания на «инвалид» класс, как я ожидал бы смелые, чтобы быть сняты с охраной (т.е. имеет белый фон с черным текстом).

Может ли кто-нибудь увидеть, что я сделал неправильно?

Большое спасибо за помощь!

Answer 1

Вы упомянули #bold .disabled, что означает элемент с классом disabled внутри элемента с идентификатором bold.

Это должно быть #bold.disabled в качестве своего идентификатора и класса для того же элемента

#bold.disabled { 
    background-position: 0 -29px; 
} 

Обновлено Fiddle