id 和 class的区别，使用避坑！

css中的样式标签 只有id 和 class，但是两者的使用的时候确有不同的地方，尤其是在 js中！
今天下午折腾了一下午，就是因为这两个 标签没用好！
用jq做一个下拉菜单的效果，所有的 li 标签都添加了id=2nav，然后使用如下的代码，死活没效果！

 <script>
   $("#2nav").hover(
  function () {
   //console.log(111);
   $(this).children("span").css("display","inline-block");
  },
  function () {
   //console.log(456);
   $(this).children("span").css("display","none");
  }
);
1
2
3
4
5
6
7
8
9
10
11

折腾了一下午，最后找到原因了：
原来是id标签，是用来标识页面中的唯一元素，所以只能用一次！导航循环的时候 菜单里 都加上了 id=‘2nav’ ，已经违背了唯一性，所以jq只对第一个元素产生效果，其他的元素根本就产生效果！
修改方法：
将导航菜单里的 li 标签id=‘2nav’ 改成 class=‘2nav’，一切正常了！

 <script>
   $(".2nav").hover(
  function () {
   //console.log(111);
   $(this).children("span").css("display","inline-block");
  },
  function () {
   //console.log(456);
   $(this).children("span").css("display","none");
  }
);
1
2
3
4
5
6
7
8
9
10
11

总结：
ID和CLASS的区别
class是设置标签的类，用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名
id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称

class可以重复，id是唯一的