Question

我正在开发一个网络聊天系统，将聊天的当前“成员”显示为无序列表。聊天成员可以是公众的标准成员，主持人或警察。因此每个列表项都有不同的样式：

<ul id="MembersList ">
<li class="Police">Mr Policeman</li>
<li class="Moderator">Mr Moderator</li>
<li class="Member">Joe Bloggs 1</li>
<li class="Member">Joe Bloggs 2</li>
<li class="Member">Joe Bloggs 3</li>
</ul>

#MembersList li.Member
{
    list-style-image: url(images/member.png);
}

#MembersList li.Moderator
{
    list-style-image: url(images/member_moderator.png);
}

#MembersList li.Police
{
    list-style-image: url(images/member_police.png);
}

工作正常:)给每个成员他们自己的小图标。

这是它变得棘手的地方。当一个成员输入时，jQuery会为该成员添加一个额外的样式，因此列表项有效地改为：

<li class="Member Typing">Joe Bloggs 3</li>

我现在想要实现的是更改列表项图标，但是根据成员类型显示不同的图标。所以有类似下面的CSS：

#MembersList li.Member .Typing
{
    list-style-image: url(images/member_typing.png);
}

#MembersList li.Moderator .Typing
{
    list-style-image: url(images/member_moderator_typing.png);
}

#MembersList li.Police .Typing
{
    list-style-image: url(images/member_police_typing.png);
}

除了上面的CSS不起作用。

那么请一位CSS大师向我解释在这个例子中使用的正确CSS吗？谢谢！

Answer 1

没有空格，.classnameone.classnametwo：

#MembersList li.Member.Typing
{
    list-style-image: url(images/member_typing.png);
}

#MembersList li.Moderator.Typing
{
    list-style-image: url(images/member_moderator_typing.png);
}

#MembersList li.Police.Typing
{
    list-style-image: url(images/member_police_typing.png);
}

当您执行以下操作.classnameone .classnametwo时，指定一个类.classnametwo的子元素，该元素是类.classnameone

的子元素

使用jQuery一次应用两个CSS样式

1 个答案: