HTML元素中class比id所具有的优势

剖析标注HTML元素时class比id所具有的优势

这篇文章主要介绍了标注HTML元素时class比id所具有的优势,id的CSS优先级比class要高,因而修改样式时在class的基础上再去构建id标注的元素会更方便,需要的朋友可以参考下.

在网页中有很复杂的HTML 结构，如果我们使用CSS 来定义相关的样式，就需要为这些结构指定相应的标志，然后再编写相应的CSS 选择器来获取他们赋予样式。最常用的两个标

注属性就是id 和class 了，例如：

现在还有更多的选择方法，例如：属性选择器等。但是并不推荐使用，使用属性选择器虽然可以省略掉id 和class，但是存在后期维护起来不方便、早期浏览器兼容性不好、影响浏览器的渲染效率等问题。所以，虽然有了更多的选择，我还是推荐使用id 和class 以及元素名来构造CSS 选择器。

既然id 和class 都可以标注HTML 结构，那么我应该优先选择使用什么？这就是本文即将讨论的。

id 和class 的区别

有经验的朋友可以略过这一部分。

1.唯一性和重复可用性

i d 在网页结构中只能是唯一的，如果你指定了一个元素的id 为aa，那么网页中就不能再出现一个id 为aa 的HTML 元素。虽然强大的浏览器会支持多个重复id 并赋予对应样式，但这是不标准不允许的。

而class 相反，它可以在网页结构中重复使用，你指定了一个元素的class 为bb，同时可以指定下一个元素的class 为bb，这两个元素可以同时被应用bb 的样式。此外，你还可以为一个元素制定多个class 属性值，这样就会同时获得多个属性的样式。

2.CSS 中优先级不同

在CSS 选择器中，对id 和class 的样式应用优先级不同。id 的样式优先级要高于class 的样式优先级，如果我对一个id 为aa 、class 为bb 的div 指定了下面的样式：

1.#aa{background:red;}

2.bb{background:blue;}

那么浏览器会显示成红色背景。

3.跳转功能

使用id 属性可以增加锚标记跳转功能，如果在页面中我们对一个div 指定id 为aa ，那么我们在当前的URL 后面加上#aa ，页面将会立刻跳转到id 为aa 的div 所在的置。例如：百度百科的章节跳转。而class 没有这个功能。

为什么使用class 而不是id

使用class 究竟有什么好处？

1.减少命名

为复杂的结构起名字真是一个麻烦的事情，如果我使用id 来标注，那么我必须为每一个结构起一个名字。而在网页中，有很多结构的样式和效果都是一样的（例如：统一的按钮样式），那么我们仅仅编写一个通用的class 样式，然后为所有的需要相同样式的结构赋值这个class 即可。

2.高度重复使用

class 可以重复应用在其他结构中，并且可以对某个元素应用多个class ，那么这样就可以高度重复使用某个class 样式了。比较极端的实际应用就是原子类，例如:

.fl{float:left;display:inline;}

2.fr{float:rightright;display:inline;}

尽可能小的简短的写出一些类，然后对于某个需要这个样式（例如：上面的浮动）的元素直接写上class （例如：class=“fl”）。

一般的应用来说，对于某些需要相同样式的结构，只编写一个样式，然后对这些结构赋值相同的class 即可，这样达到高度的样式代码重用，而且修改起来也比较方便。

3.优先级低

class 的优先级高于元素名，低于id ，利用优先级低的这个特性可以方便调试和样式覆盖。

如果我们之前对一个元素使用了id 来标注，我们想修改这个元素的样式，只能去修改对应的CSS 样式代码或者对某样式使用!important 强调语法来覆盖原有样式。

如果元素使用了class 来标注，那么我们直接为元素增加一个id ，然后构造一个元素i d 的CSS 选择器即可进行修改覆盖。

正是因为这些特性，所以要尽量使用class 来标注元素，方便后期维护等。

4.id 也是必须有的

class 也不是万能的，有很多地方我们必须同时使用id 来标注。

5.锚标记跳转

要想在页面中使用锚标记来跳转，那只能指定某个跳转目标的id ，因为class 可以被重复多次使用，所以不具备跳转的功能。

6.用在input 中

使用input 的时候，通常要使用label 标签来描述这个input 的功能。将label 与inpu t 关联的方法有两种，一种是使用label 的for 属性，属性值就是input 的id 值，另一种就是将label 把相应的input 包裹起来。很显然第一种比较灵活比较好，但是你必须要对相应的input 指定一个id 属性。

此外，有些特殊的需求，也必须使用id ，这里不再总结了。

最佳的使用组合

之前有很多批评class 的言论，甚至有言论说W3C 应该废除class 标签，潜行者m 也曾经是id 属性的狂热使用者，但是在实践过程中，越来越发现class 的优点并改用clas s。

比较好的使用组合就是对于绝大多数的元素和结构等使用class 来指定，对于极个别需求特定功能的元素使用id 标注。