为什么在 CSS 中，id 也能像 class 一样被复用
在学习 CSS 的时候，不论网上的资料还是书本都会告诉你：对于只需要用到一次的情况使用id，对于需要用到多次的情况使用class。 但是，如果我们把 id 用于多个标签，发现它和 class 一样能改变多个标签的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test1{
width: 200px;
height: 200px;
background: red;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="test1"></div>
<div id="test1"></div>
<div id="test1"></div>
</body>
</html>
结果会发现，三个div的背景都是红色。 说好的 id 只能使用一次呢？怎么能用在多个 div 上？这不和 class 一样了？ 这个时候，我们就只有找到官方的权威资料，来看看是怎么一回事了，下面分别是JS、HTML、CSS分别对id标签的使用定义。
先看看 javascript，MDN 对 id 怎么定义的
js是通过DOM来对HTML进行操作，在DOM的定义中，虽然提到了ID是唯一的
The concept of an element’s unique identifier (ID)(资料链接1)
但是并没对存在多个相同 id 的情况做出规定，见 (资料链接2)，不过，大部分浏览器会返回找到的第一个id，从这个点来说，，JS中保证id的唯一性很重要。
再看看 w3c 标准中对 HTML 的 id 标签的定义
If a document contains more than one object with the same identifier, the objects are exposed as a collection that can be referenced only in ordinal position. (资料链接3)
大概意思是：如果有多个相同的id，这些对象将被存放在一个集合中，并且只能顺序地被引用。
最后，找到 w3c 标准中对 CSS 的 ID 选择器的规定
If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector. (资料链接4)
大概意思是：如过有多个相同的 id，所有的 id 都必须选中。
最终结论
也就是说，之所以在 css 中，id 也能像 class 一样被重复使用，这只是对于 css 来说的，而对于 JS 和 HTML 并不适用。 另外 id 的权值比 class 高，因此，可以在 css 中用 class 做大部分的样式，最后再用 id 来修改特定的需求。