<p>This is the HTML:</p>

<pre><code>&lt;div id="testBlue"&gt;
    &lt;span&gt;hello&lt;/span&gt;
    &lt;span id="testGreen" class="testGreen"&gt;hello2&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>If I have set in CSS:</p>

<pre><code>#testBlue span { color:Blue; }    
.testGreen, #testGreen { color:Green; }
</code></pre>

<p>How can I override the general style in the second SPAN?</p>

<p>I have tried both id and class selectors but it doesnt override it.</p>

```
```
#testGreen { color: red !important;}
```
```
or
```
```
.testGreen { color: red !important;}
```
```
Either will override the inherited rule, because
```
!important
```
puts more weight to one side of an an otherwise equal decision.