当多个元素共享相同的id时，浏览器对css应用程序的行为

Question

我知道ID应该在HTML文档中是唯一的。但是很多HTML页面都很草率，不遵循规则。我的问题是：浏览器如何处理共享相同ID的多个元素的CSS应用程序？

在我的初步测试中，似乎他们将id特定的CSS规则应用于具有相同id的所有元素。这种行为似乎在IE 8，Chrome，Firefox，Opera上很常见。

这是浏览器处理这种草率HTML的明智选择还是这种行为有例外？由于在多个元素之间共享相同的ID，CSS布局可能会产生什么样的意外后果？

Answer 1

就CSS“漂亮”显示而言，你是对的，错误恢复是将CSS应用为类。

  

由于在多个元素之间共享相同的ID，CSS布局可能会产生什么样的意外后果？

对于实际的CSS布局并不多，如上所述但是......

如果需要，您可能无法专门定位（隔离元素），并且/或者只需通过添加唯一ID来覆盖已包含ID的CSS规则所需的选择器的特异性进一步提升（或添加内联<style>）

如果您需要使用jQuery或其他类似的东西，也不要认为你会很好，Javascript依赖于ID来获得最佳功能

ID也 Fragment Identifiers - 如果它们不是唯一的，它们将无法正常工作

Answer 2

有关意外后果的一个例子，请参阅我回答的这个问题：

Yet another IE 'Object expected' error with no information

  

你有这个HTML，每个标签一次：

<div class='tab' id='introduction'>
    <h2 id='introduction'>Introduction</h2>
</div>

<div class='body' id='introduction' style='display:block'>

     

问题在于您正在指定   id='introduction'的两个元素。

     

由于各种原因，你不应该这样做   的是：

     

  
• 导致验证错误。      

      

  第37行，第27栏：重复ID介绍     第36行，第39栏：ID引入的第一次出现是     这里。

    

  
• 它打破了IE7中的标签。
  

Answer 3

由于这是违反规则的事情，因此它不会成为你可以依赖的东西。您所能做的就是在每个浏览器中进行测试，它的处理可能会随着下一个版本的出现而改变。

按照你的描述处理它对我来说似乎足够明智。对于javascript如何处理这种情况而不是我想象的css，可能会有更复杂的问题。

我认为不会有任何意想不到的后果。对于许多元素使用相同的类没有问题，为什么ID会有所不同？我无法想到一个案例，其中重写样式的基本规则不会按预期工作。