:nth-childでaタグにCSSでボタン実装したいんですが反映されません

ナビゲーションの実装。
こんなタグでナビゲーションを作ってみました。

<ul class="nav">
	<li><a href="#">浜寺公園</a></li>
	<li><a href="#">大山公園</a></li>
	<li><a href="#">大泉緑地</a></li>
	<li><a href="#">大浜公園</a></li>
</ul>

これを横並びにfloatして背景画像をあてたい!
めちゃくちゃ初歩的なことだっただろうと思うのですが、
私はちょっと勘違いしておりハマりましたので、書いておきます。

条件は、liにidなどを付けずに、疑似クラス「:nth-child」を使ってそのナビゲーションを実装するということでした。
:nth-childについては下記のページを参考にさせていただいた。
http://weboook.blog22.fc2.com/blog-entry-285.html

ここで見ながら気楽に書いてた。
「.nav li a」に「:nth-child」をつけて、
.nav li a:nth-child(2)
にCSSを指定してゆけばよいのだと思っていました。
大間違い!!
a:nth-childじゃ動いてくれなかった!!!!

試行錯誤の結果・・・・・下記のような感じで使わなければならないのでした・・・・・
li:nth-child(2) a です!

.nav li:nth-child(2) a {
float: left;
background-image: url(../images/nav.png);
display: block;
height: 40px;
text-indent: -999999px;
width: 166px;
background-position: -255px 0px;
}

最近気になっている本