如何在css中分別自定義列表項目圖像

Question

我想用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> 

而且我的CSS：

#list li.contact img { margin-top: -2em; } 

任何幫助非常感謝，謝謝！

Answer 1

爲什麼不這樣做：

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


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