使用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