如何在css中单独自定义列表项图像

我正在尝试使用css分别定制我的ul li图像，但这对我来说根本不起作用。我试着在我的图片上加上id，在我的li上加上课程，但每次我做任何类似的事情，尝试只对一张图片做一些事情，它都会对所有的图片做

这是我的html：

<div id="list">
<ul><li class="port"><a href="#"><img src="images/port.png" alt=""></a></li>
    <li class="secrets"><a href="#"><img src="images/secrets.png" alt=""></a></li>
    <li class="contact"><a href="#"><img src="images/contact.png" alt=""></a></li>
</ul>

非常感谢您的帮助，谢谢

为什么不：

#list{/*some css*/}
.class > image{/* css regarding image here */}


<div id ="list">
    <ul>
        <li class="port"><a href="stuff"><img src="stuff"></a></li>

---

根据您提供的标记，该规则将仅适用于联系人列表中的图像。也许其他CSS规则正在影响其他图像？如果您使用Firebug并检查样式不正确的图像，您应该能够看到哪个CSS规则正在这样做。因为它对我来说工作得很好，我发现了问题，因为我让它显示：内联，所以我不能移动一个而不移动其他的，duh！有没有一种简单的方法可以让它们在线显示，同时还能降低一个？

#list{/*some css*/}
.class > image{/* css regarding image here */}


<div id ="list">
    <ul>
        <li class="port"><a href="stuff"><img src="stuff"></a></li>