如何区分CSS文件中同一类中的两个不同图像

Question

我试图在我的标题的两侧添加两个图像.问题是我使用img选择器作为已经在我的文本左侧的图像并指定了定位.我需要另一个CSS选择器为另一个图像为新图像创建一个新位置.我怎样才能在index.html文件中重命名它以便我可以这样做？以下是HTML代码的片段:

<div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
             <h1>Feed.me</h1>
          <img src="img/hat.png"></img>
          <img src="img/ware.png"></img>

这就是CSS文件中的样子:

img {
position: absolute;
top: 5px;
left: 595px;
z-index: -1;

}

有任何想法吗？如果您需要更多信息,请与我们联系.提前致谢!

Answer 1

只需使用ID

即

<div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
             <h1>Feed.me</h1>
          <img src="img/hat.png" id="image1"></img>
          <img src="img/ware.png" id="image2"></img>

然后

   #image1 {
     ...

   }
   #image2 {
     ...

   }
   img {
      .... common stuff
   }