Question

据我所知，你应该使用class作为单个元素的多个元素和ID。

但是它们都可以用于多个元素。

这两个元素（class和id）在它们实际可以做的事情上是相同的（与它们应该做的相反）还是我错过了什么？

例如，我创建了Classes和ID，并将它们应用于我的小提琴上的多个元素：http://jsfiddle.net/4qyoyfwq/（下面编码）：

#blueid {
    color:blue
}
.greenclass {
    color:green
}

p#purple {
    color:purple
}

p.yellow {
    color:yellow
}

<p id="blueid">Hey! I am blue id</p>
<p class="greenclass">I am green class</p>
<b id="blueid">Yup, also blue id!</b>
<br />
<br />
<b class="greenclass">Yet I am green class</b>
<br />
<p id="purple">I am purple id</p>
<p class="yellow">I am yellow class</p>

那么为什么这两种不同的类型？

Answer 1

Ids比specificity大得多（100比10）

这意味着如果我有一个id =＆＃34的元素;测试＆＃34;和class =＆＃34; test＆＃34; #test类规则将覆盖.test规则

所以在下面的例子中：

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

#test {
  color: red
}

.test {
 color: blue;
}

文本将为红色 - 即使.test类稍后出现在css文件中

Answer 2

每页只能使用一次ID，可以根据需要多次使用CLASS。只是因为您可以在HTML中输入id="myId"次数，这并不意味着您应该这样做。

除了你在使用ID时必须注意特殊性，ID很多，而且重量更高。而不是CLASS，因此如果你需要覆盖它们的样式，可能会导致你编写一些膨胀的CSS选择器。

Answer 3

这两个元素（class和id）也是如此实际做（而不是他们应该做的）或我遗失了什么？

不完全。

请勿将您在浏览器中看到的内容与您应该做的事情混淆，或者确实您应该做什么。

多个id具有相同的值是无效的HTML，according to the spec

..此属性为元素指定名称。 此名称在文档中必须是唯一的。

解析共享相同值的多个id属性的方式取决于浏览器，以及它如何决定处理此类异常。

一般来说，浏览器是相对灵活的。当谈到解释这条规则时，为什么你会看到＆＃39;明显的＆＃39;支持多个相同的id，但由于这实际上是无效的，如果浏览器供应商决定严格遵守规范，则此支持可能随时发生变化。

因此，不应该依赖它。

请注意，这与class和id的具体功能有关。 id是对DOM节点的唯一引用，不管样式如何，class是对一组节点的引用，（假设）共享样式。

如其他地方所述，特异性原则与此目标相关，更高的权重分配给更具体的属性（那些以更少元素为目标的属性）。因此，在CSS术语中，id上的选择器将覆盖class上的一个选择器。

Answer 4

多个ID违反了html标准。

现代浏览器可能会原谅诸如此类的常见违规行为以试图赢得人气。 :)

我建议您尽可能遵守标准的浏览器实施标准。该标准的作者发布了一个服务，该服务将根据给定的html版本验证您的html。

http://validator.w3.org/

相信你，而不是你的浏览器。

为什么你使用Class作为多个元素而ID却是一个？

4 个答案: