分析标明HTML元素时class比id所具备的优点

在网页页面中有很繁杂的 HTML 构造,假如大家应用 CSS 来界定有关的款式,就必须为这些构造特定相应的标示,随后再撰写相应的 CSS 挑选器来获得她们授予款式。最常见的两个标明特性便是 id 和 class 了,比如:

XML/HTML Code拷贝內容到剪贴板
  1. <div class=”header” id=”header” ></div>  

如今也有更多的挑选方式,比如:特性挑选器等。可是其实不强烈推荐应用,应用特性挑选器尽管能够省略掉 id 和 class,可是存在 后期维护保养起来不便捷、初期访问器适配性不太好、危害访问器的3D渲染高效率 等难题。因此,尽管有了更多的挑选,我還是强烈推荐应用 id 和 class 和 元素名 来结构 CSS 挑选器。
既然 id 和 class 都可以以标明 HTML 构造,那末我应当优先选择挑选应用甚么?这便是本文将要探讨的。

id 和 class 的差别

有工作经验的盆友能够略过这1一部分。

1.唯1性和反复能用性

id 在网页页面构造中只能是唯1的,假如你特定了1个元素的 id 为 aa,那末网页页面中就不可以再出現1个 id 为 aa 的 HTML 元素。尽管强劲的访问器会适用好几个反复 id 并授予对应款式,但这是不规范不容许的。

而 class 相反,它能够在网页页面构造中反复应用,你特定了1个元素的 class 为 bb,另外能够特定下1个元素的 class 为 bb,这两个元素能够另外被运用 bb 的款式。另外,你还能够为1个元素制订好几个 class 特性值,这样就会另外得到好几个特性的款式。

2.CSS 中优先选择级不一样

在 CSS 挑选器中,对 id 和 class 的款式运用优先选择级不一样。id 的款式优先选择级要高于 class 的款式优先选择级,假如我对1个 id 为 aa 、class 为 bb 的 div 特定了下面的款式:

CSS Code拷贝內容到剪贴板
  1. #aa{background:red;}   
  2. .bb{background:blue;}  

那末访问器会显示信息成鲜红色情况。

3.自动跳转作用

应用 id 特性能够提升锚标识自动跳转作用,假如在网页页面中大家对1个 div 特定 id 为 aa ,那末大家在当今的 URL 后边再加 #aa ,网页页面可能马上自动跳转到 id 为 aa 的 div 所属的部位。比如:百度搜索百科的章节自动跳转。而 class 沒有这个作用。


为何应用 class 而并不是 id

应用 class 到底有甚么益处?

1.降低取名

为繁杂的构造起姓名简直1个不便的事儿,假如我应用 id 来标明,那末我务必为每个构造起1个姓名。而在网页页面中,有许多构造的款式和实际效果全是1样的(比如:统1的按钮款式),那末大家仅仅撰写1个通用性的 class 款式,随后为全部的必须同样款式的构造取值这个 class 便可。

2.高宽比反复应用

class 能够反复运用在别的构造中,而且能够对某个元素运用好几个 class ,那末这样便可以高宽比反复应用某个 class 款式了。较为极端化的具体运用便是分子类,比如:

CSS Code拷贝內容到剪贴板
  1. .fl{float:left;display:inline;}   
  2. .fr{float:rightright;display:inline;}  

尽量小的简洁明了的写出1些类,随后针对某个必须这个款式(比如:上面的波动)的元素立即写上 class (比如:class=“fl”)。
1般的运用来讲,针对一些必须同样款式的构造,只撰写1个款式,随后对这些构造取值同样的 class 便可,这样做到高宽比的款式编码重用,并且改动起来也较为便捷。

3.优先选择级低

class 的优先选择级高于 元素名,低于 id ,运用优先选择级低的这个特点能够便捷调节和款式遮盖。

假如大家以前对1个元素应用了 id 来标明,大家想改动这个元素的款式,只能去改动对应的 CSS 款式编码或对某款式应用 !important 强调英语的语法来遮盖原来款式。

假如元素应用了 class 来标明,那末大家立即为元素提升1个 id ,随后结构1个元素 id 的 CSS 挑选器便可开展改动遮盖。

更是由于这些特点,因此要尽可能应用 class 来标明元素,便捷后期维护保养等。

4.id 也是务必有的

class 也并不是全能的,有许多地区大家务必另外应用 id 来标明。

5.锚标识自动跳转

要想在网页页面中应用锚标识来自动跳转,那只能特定某个自动跳转总体目标的 id ,由于 class 能够被反复数次应用,因此不具有自动跳转的作用。

6.用在 input 中

应用 input 的情况下,一般要应用 label 标识来叙述这个 input 的作用。将 label 与 input 关系的方式有两种,1种是应用 label 的 for 特性,特性值便是 input 的 id 值,另外一种便是将 label 把相应的 input 包裹起来。很明显第1种较为灵便较为好,可是你务必要对相应的 input 特定1个 id 特性。

另外,一些独特的要求,也务必应用 id ,这里已不总结了。

最好的应用组成

以前有许多指责 class 的观点,乃至有观点说 W3C 应当废止 class 标识,潜行者m 也以前是 id 特性的狂热应用者,可是在实践活动全过程中,愈来愈发现 class 的优势并改用 class。

较为好的应用组成便是针对绝大部分的元素和构造等应用 class 来特定,针对极某些要求特殊作用的元素应用 id 标明。