Question

我的问题是如何将两种不同的CSS样式应用于同一页面上的同一个div？我有一个页面加载（一个iframe加载）其中两个不同的图像，两个图像都有一个具有相同ID的div元素，我想div与div加载一次时有不同的样式，当加载另一个时不同时间。

那怎么能实现这样的壮举？

这是div的HTML：

<div id="sa_moreinfo">
    <a href="" target="_blank">More Information</a>
</div>

这是div的CSS：

#sa_moreinfo {
margin: 0px 0px 0px 840px;
float: left;
position: relative;
width: 135px;
}

问候。

Answer 1

根据我上面的评论，以下是详细信息。

请查看以下HTML。

 <div class="test1">
    <div id="sa_moreinfo">
     <a href="" target="_blank">More Information</a>
   </div>
 </div>
 <div class="test2">
    <div id="sa_moreinfo">
     <a href="" target="_blank">More Information</a>
   </div>
 </div>

现在使用父元素，您可以应用#sa_moreinfo不同的样式，如下所示。

 .test1 #sa_moreinfo {
   margin: 0px 0px 0px 840px;
   float: left;
   position: relative;
   width: 135px;
}
.test2 #sa_moreinfo {
   margin: 0px 500px 0px0px;
   float: right;
   position: absolute;
   width: 300px;
}

因此，基于父元素test1和test2，它将为同一个id应用不同的样式。但复制身份证不是一个好习惯。

Answer 2

好的，首先不要在一个页面上多次使用相同的ID，然后尝试使用类来设置所有内容的样式。我建议你添加一些额外的类来扩展第二个div上的另一个类，如果你不能那么使用:nth-child选择器。顺便说一下，避免使用iframe也不错。

如何将两种不同的CSS样式应用于同一页面上的同一个div？

2 个答案: