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

Question

我正在嘗試使用css分別自定義我的ul圖像，但這對我不起作用。 我曾嘗試將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>