html - Understanding CSS selectors

Question

Why is it that the below makes the text red?

#stories li a {color:red}
.default li.expand a {color:green}
li.expand a {color:blue}

---

<ul id="stories" class="default">
   <li>this is the end</li>
   <li class="expand">this is the end</li>

Only if I put #stories on the others will the text change. Does a # have more dominance even though it's further up the css?!

Answer 1

It's a matter of "CSS Specificity". Andy Clarke's article CSS: Spcificity Wars does a pretty good job explaining it with a little humor. Although Eric Meyer adds more clarity in his comment.