ID与CLASS的区别?

原创 2018年04月16日 11:15:16

大家好,我是IT修真院的王寒,一枚正直,纯洁,善良的前端程序员。

今天给大家分享一下ID与class的区别。

1.背景介绍

HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。本次讲的id和Class就是id选 择器和类选择器。

2.知识剖析

什么是ID?

从语义上来说,id是identity(ai'dentiti)的简写,identity 是身份的意思,比如我们的身份证就叫做id-card。

在html中,id是设置标签的标识,使用方法是:

            
               
#id名称{样式声明} document.getElementById("id名称") $("#id名称")

ID的作用?

id 属性规定 HTML 元素的唯一的 id。 id 在 HTML 文档中必须是唯一的。 id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式

什么是class?

1.从语义上来说,class是类别的意思,他表示的是具有共同特点的东西,比如我们说我们是一类人,就是说我们有相同的特点。

2.在html中,我们用class为标签设定一个可以复用的标识,具有同样class的标签就会有相同的特点:

            
           
.class名称{样式声明} document.getElementsByClassName("class名称") $(".class名称")

class的作用

在css中,用class来定义那些可复用的样式,然后可以套给多个结构/内容。

3.常见问题

1.ID和class的区别

2.ID和class的优先级

3.同一页面使用相同的id会怎样

4.解决方案

1.ID和class的区别

id是一个标签,用于区分不同的结构和内容,就像人的名字,如果一个房间内有2个人同名,在老师点名的时就会出现混淆; class是一个样式,可以用在任何结构和内容上,就像一件衣服;

2.ID和class的优先级

通过继承来的属性 id 的优先级高于 class

CSS的优先级顺序: tag中的style > id > class > 继承的属性

一个元素同时应用多个class,后定义的优先(即近者优先),加上!important者最优先!

3.同一页面使用相同的id会怎样

不能通过W3C的校验。在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同ID “一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div,那就会出现错误。

总结

在一般情况下:

我们利用class来为元素添加样式----css

我们利用id来为元素添加行为----js/jQuery

7.参考文献

参考一:html中,id属性和class属性有什么区别?

参考二: CSS样式id和class属性优先级问题

参考三:CSS 的 ID 和 Class 有什么区别?如何正确使用它们?

参考四:CSS选择器优先级及!important属性

8.更多讨论

如何正确使用ID和Class?

css只用class来写并有专门的class通用和私有模块命名,id具有唯一性且优先级太高只作为js操作dom的挂钩全部不添加样式, 如果使用jq或zepto的话,操作的class类名一般也不加样式,这部分的class命名和id一样由js来制定。这样做比较适合大型, 多人维护并且需要长期迭代的项目,css的class类名和js操作的id、class类完全分离,这样产品的ui或者产品交互逻辑变动 二者互不影响,易维护。

问题:

1.class哪种命名规则用的比较多?

答案:点击

2.class命名规范。

答案:点击

3.id选择器和类选择器有什么区别。

答案:点击

Create Your Own Visual Basic Add-Ins

Create Your Own Visual Basic Add-InsBy S.S. AhmedRating: 3.7 out of 5Rate this article docume...
  • sonicdater
  • sonicdater
  • 2002-03-09 18:00:00
  • 922

CSS中CLASS和ID的区别.doc

  • 2010年09月08日 13:13
  • 20KB
  • 下载

HTML-class与id的区别及应用

class是设置标签的类。 id是设置标签的标识。 class属性用于指定元素属于何种样式的类。 如样式表可以加入: .baobao { color: lime; backgr...
  • klarclm
  • klarclm
  • 2012-03-18 10:58:07
  • 6831

DIV中的ID和CLASS有什么区别

本文转载自:http://blog.163.com/zzf_fly/blog/static/209589158201271311449305/ 初学DIV 对其中的class id 两者很难区别...
  • li365
  • li365
  • 2014-12-01 11:33:35
  • 1635

当我们在使用CSS的时候ID与Class有何不同?

ID和Class之间有何不同ID和Class都是“钩子”我们需要一个使用HTML/XHTML语言描述文档内容的方式,类似的基础元素有, 和来完成这样的工作,但我们的基础标签不能覆盖网页元素和布局选择中...
  • kingroc
  • kingroc
  • 2016-06-03 15:35:43
  • 2105

HTML5中id、name、class 区别

转载地址:http://www.2cto.com/kf/201210/161751.html 网上找不到专门针对html5的,只能找到以前HTML的。看了一下,它们差不多,尤其是本文后面专门...
  • li6727975
  • li6727975
  • 2015-02-04 10:27:58
  • 2788

HTML中class和id标签的区别

先举个例子来区分它们两个:         例如,在一个屋里,有很多人,那么ID就是人的名字,而Class是衣服。         如果两个人名字相同就会出现混淆,而如果两个人穿同样的衣服就不会出...
  • jian520lang____diguo
  • jian520lang____diguo
  • 2015-06-25 10:13:22
  • 2547

div中class和id有什么区别?

转载地址:http://blog.163.com/zzf_fly/blog/static/209589158201271311449305/      我觉得这篇文章jiangde...
  • stpeace
  • stpeace
  • 2014-05-18 21:15:55
  • 17668

jquery id选择器和class选择器的区别

Title $(function(){ alert($('.box').size()); //返回2 }); ...
  • Deus_ex_machina
  • Deus_ex_machina
  • 2017-07-15 22:27:49
  • 428

html css中id和class的区别

id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩。当我们为一个元素定义样式时。可以使用id,也可以使用class。但是我们也应该注意这两者的区别。  1、在css样式表...
  • cui_angel
  • cui_angel
  • 2012-06-11 16:57:36
  • 796
收藏助手
不良信息举报
您举报文章:ID与CLASS的区别?
举报原因:
原因补充:

(最多只允许输入30个字)