Understanding CSS selectors

#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>

<div id="first-id">
  <div id="second-id">
    <div class="someclass">

    </div>
  </div>
</div>


#first-id .someclass {}

.someclass {}

#second-id .someclass {}

.someclass { color:#f00 !important;}

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