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
   }

Answer 2

您只需要添加一个自定义css类并将其分配给img。像这样：

HTML：

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

CSS：

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

}

.customImg{

position: absolute;
top: 5px;
left: 295px;
z-index: -1;
}

Answer 3

你可以做几件......

1 - 为您的图像设置类/ ID

<img class="left" src="img.jpg"/>
<img class="right" src="img.jpg"/>

CSS

.left {
    float: left;
}
.right {
    float: right;
}

2 - CSS选择器:nth-child

img:nth-child(1) {
    float: left;
}
img:nth-child(2) {
    float: right;
}

Answer 4

您可以尝试使用三种不同的方式

1）将class应用于图片标记

.image1_class

{
...
}

.image2_class
{
 ...
}

2）或将id应用于img标签

#image1
{
...
}
#image 2
{
...
}

3）如果您不想添加课程或ID，可以在css中使用:first-child或nth-child()选择器

请参阅此链接：nth-child()

Answer 5

我建议给他们单独的ID，以便您可以单独调整它们，例如：

<img src="/yourImages/image.jpg" id="img1" />
<img src="/yourImages/image.jpg" id="img2" />

然后在你的CSS中你可以像这样编辑

#img1 { 
        Your styling here
}
#img2 {
        Your styling for the second image here
}

不知道这是不是你想要的，但我希望它有所帮助。

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

5 个答案: