CSS ID和类没有显示任何区别[重复]

Question

我知道 ID 和 Class 之间的区别。但是为什么这两个ID都在这个html中生效呢？ ID 应该是唯一的，对吧？

#text {
    text-align:center;
    color: red;
}

然后 id="text" 在我的同一个 html 页面中使用了两次，并且都得到了相同的效果。如果'id'具有相同的效果，为什么我必须使用“class”？

Answer 1

当页面中有重复的 ID 时，ID 的行为似乎类似于类，这只不过是浏览器实现 CSS 的方式的副作用。

文档是否符合其自己的 ID 应该是唯一的规则与 CSS 无关。 CSS 只是对match elements that have a specific value in its ID attribute, to an ID selector 说：

ID 选择器表示一个元素实例，其标识符与 ID 选择器中的标识符相匹配。

它没有说明如果有多个元素具有这样的 ID 会发生什么，因为它假定您正在使用符合标准的 HTML 文档。

您应该使用类来对您的元素进行分组，因为这是 HTML 所说的，并且您正在尝试符合有效的 HTML。 HTML 规范根本不允许使用重复的 ID，并且可能导致意外行为，因此无论它在浏览器中产生什么影响，都不能依赖它。

Answer 2

ID 在某些浏览器中可能适用于 css，但在其他浏览器中则不适用。也可能存在错误和副作用，例如：

<div>
    <input type="radio" id="id1" name="r1" />
    <label for="id1">this is radio label for id1</label>
</div>
<div>
    <input type="radio" id="id1" name="r1" />
    <label for="id1">this is another label for id1</label>
</div>
<!--the second label will also trigger the first radio change -->

有时这些功能不会绑定到您的收音机。只需在页面上保持 ID 的唯一性即可。

Answer 3

使用重复 ID 加载 DOM 不会失败，但您会对其他方面产生负面影响，例如 javascript。如果您只使用 ID 来识别 CSS 规则应该应用的位置，那么它们将像 Class 一样工作。

通常，ID 在页面上应该始终是唯一的，但 DOM 不会强制执行此操作。

Answer 4

是的，'id' 和 'class' 具有相同的效果。但是他们之间有一些不同。 1. 'id' 选择器不能在同一页面中重复。这意味着当有一个 id 选择器
命名为“header”，此页面中不能有另一个“header”。这是用于js dom命令的。 2. 'id' 选择器具有更高的优先级。这意味着当您有这样的标记时：

<style>
    #header{color:red;}
    .header{color:blue;}
</style>

<div id="header" class="header">
     test
</div>

测试中的颜色是“红色”。 http://www.impressivewebs.com/difference-class-id-css/