Показать значок по умолчанию и заменить значок, если класс установлен на div

Question

Я хочу создать тег div с иконкой слева и текстом.

Теперь, используя jquery, если происходит событие, я добавляю класс в этот тег div, чтобызначок заменяется другим значком.

У меня есть jquery, но я не уверен, как это сделать с помощью CSS.

мой css:

<div id="tag-user" class="usertag selected">Some tag</div>

.usertag
{
    background:url("/Images/tag.png") no-repeat;
}

.usertag .selected
{
    background:url("/Images/tag-selected.png") no-repeat;
}

Кажется, что изображение не появляется, поэтому я полагаю, что мой css неверен.

Answer 1

Между именами классов есть пробел, он должен быть

.usertag.selected

потому что .selected находится на том же элементе, что и .usertag.

.usertag .selected соответствует элементам с классом .selected, которые внутри .usertag.

Имейте в виду, что несколько селекторов классов не работают в ie6 и ниже. Если вам нужна совместимость с браузерами нижнего уровня, рассмотрите возможность применения usertag-selected и измените ваш css на

.usertag
{
    background:url("/Images/tag.png") no-repeat;
}

.usertag-selected
{
    background:url("/Images/tag-selected.png") no-repeat;
}

usertag-selected переопределит usertag, как объявлено позже.

Answer 2

Попробуйте удалить косую черту перед изображениями.например,

background:url("Images/tag-selected.png") no-repeat;

Вы определяете абсолютный путь там.Вам необходимо использовать относительный путь к вашим изображениям.