I actually know how the browsers tend to render the following examples (results based on Opera 9.5 and Firefox 3.0), but I don't understand the reason behind them.
Take this example,
<style type="text/css">
#outer{color:red;}
.inner{color:blue;}
</style>
<div id="outer" class="outer">
<div id="inner" class="inner">
<span>testing</span>
</div>
</div>
The result is blue text.
However, now see this example,
<style type="text/css">
#outer span{color:red;}
.inner span{color:blue;}
</style>
<div id="outer" class="outer">
<div id="inner" class="inner">
<span>testing</span>
</div>
</div>
The text is now red.
Finally, try this,
<style type="text/css">
#outer span{color:red;}
#inner span{color:blue;}
</style>
<div id="outer" class="outer">
<div id="inner" class="inner">
<span>testing</span>
</div>
</div>
Once again we have blue text.
Is there a specific reason for this methodology?
(sorry about the unclear title, it's the best I could manage.)