css中正確的類繼承？

Question

我對CSS的類繼承感到困惑。我有這樣的：

<ul id='grok'> 
    <li class='foo'></li> 
<ul> 

有時我想換一個li元素的顏色和類名，現在我這樣做：換句話說

#grok li, .red { 
    background-color: red; 
    margin: 5px; 
    padding: 5px; 
    cursor: hand; 
    cursor: pointer; 
    text-align: left; 
} 

#grok li.green { 
    background-color: green; 
    margin: 5px; 
    padding: 5px; 
    cursor: hand; 
    cursor: pointer; 
} 

#grok li.blue { 
    background-color: blue; 
    margin: 5px; 
    padding: 5px; 
    cursor: hand; 
    cursor: pointer; 
} 

，所有的定義是除了它們的顏色相同外。我可以把它壓縮成這樣的東西：

#grok li { 
    background-color: white; 
    margin: 5px; 
    padding: 5px; 
    cursor: hand; 
    cursor: pointer; 
    text-align: left; 
} 

#grok li.red { 
    background-color: red; 
} 

#grok li.green { 
    background-color: green; 
} 

#grok li.blue { 
    background-color: blue; 
} 

？與其合作會更愉快。我唯一的要求是我可以通過類名在我的ul項中找到元素，所以當我使用jquery時，我需要能夠找到類名爲「li.blue」等的元素（否則我不需要這些單獨的類）。

謝謝

Answer 1

是的，你可以。後面的規則比最初的更具體，所以他們會覆蓋它。您好，您不需要cursor:hand了。