你所不知道的 id 和 class 选择器

在最开始学选择器的时候，大家估计都会看过这样的话

于是我们就自己开始理解了，举个例子的话，那就是在一个 html 文件中，id 名字叫 'name' 的元素只能有一个，这个元素也只能有一个 id 名——'name'。严格意义上来讲也是没有错的。

那于是我们就有疑问了，那有两个会怎么样呢？如果一个元素中设置两个id值呢？如果一个 id 值被两个元素定义呢？会报错吗？

接下来就来试验一下

1. 两个元素共用一个 id 值

<div id="ni">nihao</div>
<div id="ni">hhhh</div>
<style>

    #ni{ 
        color: blue;
    }
       
</style>

这样的结果是什么？是都改变还是只改一个？是改前一个还是改后一个？

 结果是两个都会被改变样式.

那如果用 js 获取此 id 的 dom 节点是不是也是两个都获取到呢? 

let a =  document.getElementById('ni');
console.log(a);

 

我们看到只获取到了第一个dom节点。（可以尝试一下打印输出console.log(ni); 看看会有什么效果）

2. 一个元素中有两个 id 值

<div id="ni" id="hao">nihao</div>
    <style>
        #ni{
            color: blue;
        }
        #hao{
            color: red;
        }
    </style>

我们发现，只有第一个id的样式值才生效了。其实这样的话只有第一个id值是生效的，在通过id获取节点的时候，后一个id获取到的为null。