Можете ли вы использовать разные изображения значков для каждого элемента списка в неупорядоченном списке?

Я не продвинутый пользователь CSS, но у меня есть достойные рабочие знания, я полагаю. Я пытаюсь сделать неупорядоченный список, который использует разные значки для каждого элемента списка. Я также хотел бы, чтобы цвет фона элемента списка изменялся при наведении.

Есть ли способ сделать это с помощью CSS, или вы просто включите образ значка в элемент списка (например, ниже)?

<li><img src="voters.jpg"><a href="voters.html">Voters</a></li>

Использование стиля list-style на уровне ul делает все значки одинаковыми, и я не смог найти другой способ. Большинство примеров, которые я нашел, показывают, как использовать изображения в списке, но только если маркированные изображения одинаковы. Я определенно открыт для предложений и улучшений в том, как я пытаюсь это сделать.

спасибо

<div class="content-nav">
  <ul>
    <li class="instructions"><a href="instructions.html">Instructions</a></li>
    <li class="voters"><a href="voters.html">Voters</a></li>
  </ul>
</div>

.content-nav {
    font-size:12px;
    width:160px;
    z-index:0;
}

.content-nav ul {
    padding:0 20px;
    margin:30px 0;
}

.content-nav li {
    padding:5px;
    margin:5px 5px;
}

.content-nav li a {
    color:#666;
    text-decoration:none;
}

.content-nav li.voters a {
    background:#FFF;
    color:#666;
    text-decoration:none;
    list-style-image:url(images/voters.jpg);
}

.content-nav li.voters a:hover {
    background:#0CF;
    color:#000;
}

.content-nav li.instructions a {
    background:#FFF;
    color:#666;
    text-decoration:none;
    list-style-image:url(images/voters.jpg);
}

.content-nav li.instructions a:hover {
    background:#0CF;
    color:#000;
}

Ответы

<ul>
    <li class="li1">List 1</li>
    <li class="li2">List 2</li>
</ul>

.li1 {
   background:url('li1.gif') 50% 50% no-repeat no-repeat;
   padding-left: 5px;
}
.li2 {
   background:url('li2.gif') 50% 50% no-repeat no-repeat;
   padding-left: 5px;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

ul li:nth-child(1) {
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png');
}
ul li:nth-child(2) {
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png');
}
ul li:nth-child(3) {
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png');
}