Question

从我从其他帖子like this中学到的东西，我发现一个id不能用于多种元素。但是以下代码效果很好：

<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<h1 id="p01"> Heading</h1>
<p>This is a paragraph.</p>
<p id="p01">This is a diff paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>

我已将p01 ID分别用于两个元素<p>和<h1>。我是html的新手;也许我误解了一些概念。不应该有矛盾。请告诉我我的理解错误..

Answer 1

它可能在您正在使用进行测试的浏览器上运行，但之后无法在其他浏览器上运行，因为它违反了HTML5规范。

如果要使用共享属性处理多个元素，可以添加一个类。

<h1 id="p01a" class='p01'> Heading</h1> <p>This is a paragraph.</p> <p id="p01b" class='p01'>This is a diff paragraph.</p> <p>This is a paragraph.</p> <p id="p01c" class='p01'>I am different.</p>

Answer 2

如果你使用CSS的类来编写它，那么在有效性和语义方面会更好，更好：

<!DOCTYPE html>
<html>
<head>
<style>
.p01 {
color: blue;
}
</style>
</head>
<body>
<h1 class="p01"> Heading</h1>
<p>This is a paragraph.</p>
<p class="p01">This is a diff paragraph.</p>
<p>This is a paragraph.</p>
<p class="p01">I am different.</p>

</body>
</html>

仅仅因为它使用id起作用并不意味着它是正确的。想象一下，你想在一个月内添加一些javascript来获取其中一个元素，你就不能再使用它了：

var e = document.getElementById("p01");

因为你无法确定会返回什么。

一种看待它的方法是考虑房屋。想象一下，课程定义了房屋的类型（公寓，平房，屋顶倾斜的房屋等），而ids定义了特定的房屋（约翰的房子，温迪的房子等）。

现在想象一下，你想把所有的平房漆成红色。使用该类，您可以轻松地一次性获取所有这些内容，例如：

var houses = document.getElementsByClassName("bungalow");
paint_red(houses);

现在想象一下，你想把一个包送到温迪家。在这种情况下，您可以使用其ID：

找到特定的房屋

var wendys_house = document.getElementById("wendy");
send_package_to(wendys_house);

因为您知道id是唯一的，所以您可以确定只有Wendy的房子会收到包裹。

同一个id可以在html中解决多个元素吗？

2 个答案: