Правильное наследование класса в css?

Question

Я запутался с наследованием класса для css. У меня есть это:

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

иногда я хочу изменить название цвета и класса литий элемента, прямо сейчас я делаю это:

#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» и т. Д. (В противном случае Мне не нужны эти отдельные классы).

Thanks

Answer 1

Да, вы можете. Последние правила более специфичны, чем исходные, поэтому они будут переопределять его.

AFAIK Вам больше не нужен cursor:hand.