10

可能重复：
具有相同 ID 的多个元素响应一个 CSS ID 选择器

下面是我正在测试的示例代码，我很困惑。每个人都说我们可以使用或者我们应该每个 id 只使用一次，但是我有测试多次使用它，但它给了我正确的输出。

我应该怎么办？

在这个例子中，它对我来说有点像课堂一样

代码：

<html>
<head>
<style>

#exampleID1 { background-color: blue; } 
#exampleID2 { text-transform: uppercase; } 

</style>
</head>
<body>
<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>
<p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters.</p>

<address id="exampleID1">

Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>


<blockquote id="exampleID1">
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

</body>
</html>

请查看上面的代码并回答我为什么我们不应该在一个页面中使用两次 id 选择器而它工作正常。

4

5 回答 5

18

一个 id 在一个页面中必须是唯一的。如果要描述一组元素，请使用类。

为什么我们不应该在一个页面中使用 id 选择器两次，而它工作正常。

你犯了一个错误，并且取决于每个浏览器都会查看页面来弥补它。你不能确定他们都会。

于 2012-06-18T09:08:02.793 回答
7

我认为更容易理解的方法是与产品进行类比。想象一个ID像序列号这样的作品，换句话说，它必须是唯一的，这样你就可以识别出具有数百万份相同副本的产品。

然后，想象一下class作为产品代码，例如可以是条形码。在超市中，所有相同的产品都具有相同的条形码，可供光学阅读器读取。

因此，anID是唯一标识符，a 是class一组元素。

但是如果我ID在我的 HTML/CSS 中使用相同的，我会得到一个完美的结果，我为什么要担心 unique IDs？

原因一：

将来，如果您需要使用 Javascript 并且需要操作特定元素并且它有重复的ID，您的代码将不会生成预期的结果。

原因 2

您的代码不会被 W3C 验证，这意味着您可能会对您的网站跨浏览器的兼容性感到头疼。它可以在一个浏览器中正常工作，而在其他浏览器中则不能。

使用一个真实的例子，假设您想使用 Javascript 动态更新此元素的文本：

<blockquote id="exampleID1">
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

使用 Javascript/JQuery，您将使用如下代码：

$("#exampleID1").html("Changing element content");

然后元素的文本<blockquote id="exampleID1">将被更新，但下面的元素也会被更新，因为它具有相同的ID.

<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>

因此，如果您只想更新一个元素，它们必须具有唯一ID的 s。

ID我希望您可以使用此解释来更好地理解和之间的区别class。

于 2012-06-18T12:27:11.553 回答
2

它可以工作，但这不是 ID 的使用方式（根据 HTML 规范）。ID 必须只引用一个对象。描述多个对象必须使用类，而不是 id。

于 2012-06-18T09:10:30.213 回答
1

您应该使用唯一 ID 来确保 HTML 有效。

这背后的原因很简单，ID 用于标识唯一元素。

尽管无效，该页面仍将呈现，但最大的实际问题是 JavaScript 和其他库经过优化以在 Id 是唯一的假设下工作，因此，如果您尝试获取具有 Id 的所有元素并隐藏它们，例如使用jQuery

$('#exampleID1').hide();

只有第一个元素会被隐藏，因为通过 Id 选择应该只返回一个项目，一旦找到一个元素，查询就会短路以返回单个元素。在不知道这一点的情况下，您可能会得到一些看似奇怪的行为并且难以诊断缺陷。

于 2012-06-18T09:11:54.267 回答
0

为什么我们不应该在一个页面中使用两次 id 选择器而它工作正常

因为您不知道它是否在每个浏览器中都能正常工作。

规范说 id 在页面中必须是唯一的，因此当浏览器发现您的重复 id:s 时，它们会尽力处理它。大多数浏览器似乎通过仅对第一个元素使用标识来处理它，但在元素上保留 id 属性以便您的 CSS 仍然有效，但不能保证所有浏览器都以这种方式处理它。

不同的浏览器供应商使用不同的策略来处理不正确的标记，并且每个供应商都找到了一种“新的、更好的”方式，因此通常以尽可能多的不同方式处理不正确的标记。

于 2012-06-18T10:11:43.600 回答