显示默认图标，如果在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类的元素， in .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;

你在那里定义一条绝对路径。您需要使用图像的相对路径。