html5 id选择器重复,html5 - 页面中id过多对CSS有什么影响？

PHPzhong2017-04-17 11:06:304楼

定义了一个DOM元素的ID，则代表以下事情：

语义上：ID标识了页面中唯一的元素；

可以通过页面的hash访问ID，如http://this.that.web#the_id，使得页面打开时，这个DOM元素紧贴浏览器窗口内部的下延；

CSS中，可以通过ID选择器匹配这个元素，如#the_id{}；

JS中，可以通过document.getElementById()来选中这个DOM元素。

条目1意味着从语义上不能出现两个相同的ID；

条目2意味着只要一个可见的元素有ID，就可以构建一个地址，使得进入页面中就能看到这个元素*；

条目3意味着你对这个元素，以及它的后代可以很方便地被选取到。但并不推荐这样的行为，原因在于：

ID选择器的权重比类选择器大，后期比较难以维护，没有重用性；

ID选择器的效率不比类选择器高；

由于在所有的浏览器中，CSS都是从右往左进行解析，所以符合我们理解的#module_a form的效率比单纯使用类选择器或者混用类选择器和后代选择器低了几个数量级。

条目4意味着ID对于JS中操作DOM非常重要。重要到何地步呢，这是在每一个浏览器中都能高效地选取到相应元素的方法。

只要正确理解并体现了ID的作用(1、3、4)，ID的数量不会成为问题。顶多是你的页面变大了几kb，但对于当前的中国互联网，这几kb并不是性能瓶颈的主要来源，优化一下图片，减少一下连接数，网页的下载速度就能极大地提升。

只要CSS正确地使用类选择器、后代选择器和伪类选择器来匹配相应的样式，ID也不会对CSS造成影响。

说明：

* 并不准确，详见http://www.zhangxinxu.com/wordpress/2013/08/url-anchor-html-%E9%94%9A%E7%82%B9%E5%AE%9A%E4%BD%8D%E6%9C%BA%E5%88%B6-%E5%BA%94%E7%94%A8-%E9%97%AE%E9%A2%98/