リスト項目の先頭の記号を画像に変更し、かつ、

それぞれの項目ごとに画像を変える方法を探しています。

つまり、

<div class="rcmd">
<ul>
<li class="time">3月31日まで</li>
<li class="years">100才まで</li>
</ul>

のようにして、

.rcmd ul {
line-height: 1.5em;
list-style: none;
}
.rcmd li {
padding-left: 15px;
background-image: url(../image/time.gif);
background-repeat: no-repeat;
background-position: left center;
}

とすると、先頭の記号が画像に変わるのですが、

.rcmd li .time {
background-image: url(../image/time.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 15px;
}
.rcmd li .years {
background-image: url(../image/years.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 15px;
}

としても、それぞれの項目画像に変更されません。

これは、リスト項目に使える画像は一つだけ、ということでしょうか？

その場合、どのようにしたら、
「各項目の先頭に、それぞれの画像を与える」ということが可能でしょうか？

出来れば、CSSで一括で実現したいのです。。。
よろしくお願いします！！