html - div内のul要素を参照するには?

Question

次のような HTML 構造があります。

<div id="main_tabs">
    <ul id="main_tabs_nav">
        <li class="sn1"><a id="divleftlink0" rel="nofollow" href="javascript:divActivate(0,2,'divleft');" class="active">Newsletter</a>
        </li>
        <li class="sn2"><a id="divleftlink1" rel="nofollow" href="javascript:divActivate(1,2,'divleft');" class="inactive">Get Social</a>
        </li>
        <li class="sn3"><a id="divleftlink2" rel="nofollow" href="javascript:divActivate(2,2,'divleft');" class="inactive">Testimonials</a>
        </li>
    </ul>
</div>

そして、このような CSS を適用すると、正常に動作します。

#main_tabs_nav li.sn1 a {
width: 107px;
background: transparent url("http://i.imgur.com/someimage.png") 0 0 no-repeat;
text-indent: -9999px;
}

しかし、これは機能しません:

#main_tabs #main_tabs_nav li.sn1 a {
width: 107px;
background: transparent url("http://i.imgur.com/someimage.png") 0 0 no-repeat;
text-indent: -9999px;
}

2 番目の CSS コードも機能させるにはどうすればよいですか?

#main_tabs階層を厳密に守るために、CSSの先頭にも入れたい..