css - 具有相同 id 的多个 div 无效？

Question

我正在使用 javascript(无库)开发一个所见即所得的页面，因为它有一个相当专业的应用程序，所以它必须是定制的而不是现成的。

令人惊讶的是，我已经走了很长一段路，它已经很完整了，但我在正确显示时遇到了一些困难。

我有一个包含文本和图像的 div，图像向右浮动，因此文本围绕它们流动。

在某些地方我需要图像居中，所以我插入了一个 div 来包含它们。

下面的代码说明了这一点并且运行良好。

如果我有多个包含居中图像的 div，就会出现问题，因为这些居中 div 的 ID 相同。

如果我将居中 div 更改为一个类，则图像不会居中，但会假定父 div 的正确 float 。

有什么办法可以克服这个问题吗？

拥有多个具有相同 ID 的 div 是否存在真正的问题？

我不担心支持 FF 以外的任何浏览器。

任何建议将不胜感激，感谢阅读。

昏暗的添:o)

#details {
    width: 698px;
    background-color: #FFC;
}

#details img {
    float: right;
}   

.centreimage img {
    float: none;
}

.centreimage {
    float: none;
    text-align: center;
}




<div id="details">
  <p>Some text here</p>  
<img src="10750bath.jpg" height="166" width="250"> 
 <p>Which flows around the image on the right</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>
 <p>blah</p>

<p>The next image should be centred</p>

<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>

<p>more text</p>
<p>more text</p>
</div>

谢谢大家的帮助。

即使我将 CSS 和 HTML 更改为一个类，图像仍然无法居中。

答案在 Pekka 的线索中，特异性是原因。

特异性规则赋予 ID 比类更高的优先级。

“details”div 有一个 ID，但“centreimage”是一个类。

我将“细节”的 CSS 更改为一个类(当然还有标记)，它现在可以工作了。

不敢相信我花了至少 10 个小时来解决这个问题，所以感谢大家的帮助。

(现在你知道我为什么叫“Dim Tim”了):o)

Answer 1

是的，多个div具有相同的id是无效的。

使用类应该可以正常工作:

div.details {
    width: 698px;
    background-color: #FFC;
}

如果这些规则真的被覆盖了，您可能有另一个具有更高 specificity 的规则.在这种情况下，您将不得不向我们展示更多您的 HTML。