Question

我知道ID和Class之间的区别。但为什么这两个ID在这个HTML中生效？ ID应该唯一使用，对吗？

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

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

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'与'class'具有相同的效果。但它们之间有一些不同。 1.'id'选择器不能在同一页面重复。这意味着当有一个id选择器时命名为“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/

Answer 3

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

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

Answer 4

在某些浏览器中，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唯一。

CSS ID和类没有任何区别

4 个答案: