Javascript Img标签冲突

我正在建立一个网站，在登录页面上我有几个带有javascript交互的图像。这些是由javascript而不是html带来的，它们位于css的.img上

``` img{position: absolute; top: 500px; left: 400px; transform: translate(-50%, -50%) scale(0.2); animation: fadein 0.5s;} ```

在该网站的第二页，我有更多的图像，但我已经把他们作为网格使用CSS响应等高图像一起

.img {width: 100%; height: auto; vertical-align: middle;}

我的问题是，第二个页面使用的是第一个页面的.img属性，而不是第二个页面，我不知道如何区分它们

下面是一张图片，展示了左侧页面的外观和外观

我的最后期限很紧，但我似乎无法解决这个问题，有人知道我能做什么吗(

---

非常感谢！

img选择器太模糊，它将针对页面上的任何img。您应该使其更具体。

---

您必须为每种情况创建不同的CSS类。

问题是您在CSS中使用的是

img{}

。当您希望所有图像都以相同的方式进行样式设置时，这是很好的，但是您希望对单独的图像进行单独的样式设置。为了克服这一问题，我们使用选择器

.类别选择器将仅为其中包含

class=”“

的标记设置样式，在本例中为

---

或

（此处标记…）

也会起作用，并且会为每个

标记保存类

是的，我尝试通过在第二页的图像周围添加一个div类来实现这一点。但是他仍然以第一页的原始.img为目标…即使你将其包装在一个div中，选择器仍然会以它为目标。这太模糊了。那么，你会怎么做呢o您认为这是我的最佳解决方案吗？用更具体的选择器替换

img

选择器，您还必须将其放入您想要定位的图像中。非常感谢！不过，我已经尝试过了，但它一直以第一个.img选择器为目标unfortunately@rita如果找不到，HTML代码将使用.img样式您引用的e类。请确保已正确定义类并添加class=“classname”到标记。@rita要调试它，也许你可以删除.img选择器？所以我试着按照你说的做：我添加了大约两个div类标记，它们内部有这样的图像。我想我可能没有正确定义类？但我不确定如何修复它？类在CSS:img.div1{}中看起来像这样吗？-如果.css文件不是链接器，或者div有这个类，但是你的css样式不能正常工作，那么它可能是唯一的另一种情况。我通常会尝试向css添加背景色，看看它是否工作，尝试向它添加“背景色：红色；”，并确保它工作正常。

img.page1 {
    position: absolute;
    top: 500px;
    left: 400px;
    transform: translate(-50%, -50%) scale(0.2);
    animation: fadein 0.5s;
}

img.page2 {
    width: 100%;
    height: auto;
    vertical-align: middle;
}