标注HTML元素时class与id有什么不同

这次给大家带来标注HTML元素时class与id有什么不同，标注HTML元素时class与id的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

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

id 和 class 的区别

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

1.唯一性和重复可用性

id 在网页结构中只能是唯一的，如果你指定了一个元素的 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 指定了下面的样式：

#aa{background:red;}

.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;}

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

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

3.优先级低

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

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

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

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

4.id 也是必须有的

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

5.锚标记跳转

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

6.用在 input 中

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

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

最佳的使用组合

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

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

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

怎样让移动端的网页内容自适应

table表格中的内容溢出应该如何处理

怎么实现获取textarea的动态剩余字数

在样式表定义一个样式的时候，可以定义id也可以定义class。

一、CSS?类选择器?class

1.类选择器允许以一种独立于文档元素的方式来指定样式。

2.该选择器可以单独使用，也可以与其他元素结合使用。

提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

3.?语法使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

*.important?{color:red;}

如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：

.important?{color:red;}

结合元素选择器

4.类选择器可以结合元素选择器来使用。

例如，您可能希望只有段落显示为红色文本：

p.important?{color:red;}

选择器现在会匹配?class?属性包含?important?的所有?p?元素，但是其他任何类型的元素都不匹配，不论是否有此?class?属性。选择器?p.important?解释为：“其?class?属性值为?important?的所有段落”。?因为?h1?元素不是段落，这个规则的选择器与之不匹配，因此?h1?元素不会变成红色文本。

如果你确实希望为?h1?元素指定不同的样式，可以使用选择器?h1.important：

p.important?{color:red;}

h1.important?{color:blue;}

5.重要事项：在?IE7?之前的版本中，不同平台的?Internet?Explorer?都不能正确地处理多类选择器。

二、CSS?ID?选择器:

1.ID?选择器允许以一种独立于文档元素的方式来指定样式。

2.在某些方面，ID?选择器类似于类选择器，不过也有一些重要差别。

3.语法

首先，ID?选择器前面有一个?#?号?-?也称为棋盘号或井号。

请看下面的规则：

*#intro?{font-weight:bold;}

与类选择器一样，ID?选择器中可以忽略通配选择器。前面的例子也可以写作：

#intro?{font-weight:bold;}

这个选择器的效果将是一样的。

第二个区别是?ID?选择器不引用?class?属性的值，毫无疑问，它要引用?id?属性中的值。

以下是一个实际?ID?选择器的例子：

This?is?a?paragraph?of?introduction.

三、类选择器还是?ID?选择器？

类选择器可以为任意多个元素指定类。

区别?1：只能在文档中使用一次

与类不同，在一个?HTML?文档中，ID?选择器会使用一次，而且仅一次。

区别?2：不能使用?ID?词列表

不同于类选择器，ID?选择器不能结合使用，因为?ID?属性不允许有以空格分隔的词列表。

区别?3：ID?能包含更多含义

类似于类，可以独立于元素来选择?ID。有些情况下，您知道文档中会出现某个特定?ID?值，但是并不知道它会出现在哪个元素上，所以您想声明独立的?ID?选择器。例如，您可能知道在一个给定的文档中会有一个?ID?值为?mostImportant?的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：

#mostImportant?{color:red;?background:yellow;}

这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的?ID?值）：

This?is?important!

This?is?important!

This?is?important!

四、区分大小写

请注意，类选择器和?ID?选择器可能是区分大小写的。这取决于文档的语言。HTML?和?XHTML?将类和?ID?值定义为区分大小写，所以类和?ID?值的大小写必须与文档中的相应值匹配。

因此，对于以下的?CSS?和?HTML，元素不会变成粗体：

#intro?{font-weight:bold;}

This?is?a?paragraph?of?introduction.

由于字母?i?的大小写不同，所以选择器不会匹配上面的元素。

摘自：http://www.w3school.com.cn/css/css_selector_class.asp

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com