ID和class有什么区别?

大家好,我是IT修真院武汉分院学员曾健,一枚正直纯洁善良的WEB程序员
今天给大家分享一下,修真院官网前端js任务1,深度思考中的知识点——ID和class有什么区别?

一,背景介绍

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

二.知识剖析

从语义上来说,id是identity(ai'dentiti)的简写,identity 是身份的意思,比如我们的身份证就叫做id-card。
在html中,id是设置标签的标识,使用方法是:
 》》》》》》#id名称{样式声明}<!--这是在CSS中的用法-->
 》》》》》》document.getElementById("id名称")<!--这是在js中的用法-->
 》》》》》》$("#id名称")<!--这是在jQuery中的用法-->
 

三.常见问题

如何正确使用ID和Class?

四.解决方案

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

五.编码实战

六.拓展思考

ID的作用?

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

class的作用?
1.在css中,用class来定义那些可复用的样式,然后可以套给多个结构/内容。
2.在JS中,获取到的class将是一个数组,在使用的时候要特别注意!

七.参考文献

html中,id属性和class属性有什么区别?
CSS 的 ID 和 Class 有什么区别?如何正确使用它们?
CSS选择器优先级及!important属性

八.常见问题

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,那就会出现错误。

技能树.IT修真院   
        “我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

          这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。

                                         快来与我一起学习吧~http://www.jnshu.com/login/1/20654713

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值