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

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增加了额外的风格，该成员，因此该列表项effectivily更改为：

<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，你是一个的孩子.classnameone