html - 如何区分我的 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
   }