css - 如何在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

Why not do:

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


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