页面中id过多对CSS有什么影响?

leohxj
  • 677

除了不可复用之外, 有什么其他方面的影响?

回复
阅读 6.5k
4 个回答
Humphry
  • 16.4k
✓ 已被采纳

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

  1. 语义上:ID标识了页面中唯一的元素;
  2. 可以通过页面的hash访问ID,如http://this.that.web#the_id,使得页面打开时,这个DOM元素紧贴浏览器窗口内部的下延;
  3. CSS中,可以通过ID选择器匹配这个元素,如#the_id{}
  4. JS中,可以通过document.getElementById()来选中这个DOM元素。

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

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

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

  1. ID选择器的权重比类选择器大,后期比较难以维护,没有重用性;
  2. ID选择器的效率不比类选择器高;
  3. 由于在所有的浏览器中,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/

杞人忧天了,不会有什么影响的。比如一个页面就上百条的评论我们经常这样

<ul>
    <li id="comment-1"></li>
    <li id="comment-2"></li>
    <li id="comment-3"></li>
    <li id="comment-4"></li>
    <li id="comment-5"></li>
    ...
</ul>

ID太多的话,有时候CSS样式会因为权重的混乱而产生一些小问题,不过这都是正常的可解决的。。。我认为对于单一出现的比较重要的元素用ID最好,因为无论是CSS还是JS,ID选择器的效率是最高的

看是哪种的过多了,重复的东西当然还是给class样式比较好。
有些时候为了覆盖样式需要加长选择层级或者加新的ID比较蛋疼。
作为JS选择器的话ID倒是不错。
个人愚见。

宣传栏