课堂课题：
ID和Class有什么区别？
关联任务：
任务二
直播时间：
2020-08-13 17:00:00
课堂内容：
视频链接：
PPT链接：
提交按钮：
小课堂内容格式
标题：
【修真院xx（职业）小课堂】课题名称
开场语：
大家好，我是IT修真院XX分院第X期的学员XX，一枚正直纯洁善良的XX程序员，今天给大家分享一下，修真院官网XX（职业）任务X，深度思考中的知识点——XXX
（1）背景介绍：
背景介绍的时候，尽可能的要宽广，讲清楚来龙去脉，讲清楚为什么会需要这个技术。
（2）知识剖析：
讲知识点的时候，尽可能的成体系，学会成体系的去给别人介绍知识。现在很多做的都是零散的，没有分类。
（3）常见问题：
最少列出1个常见问题。
（4）解决方案：
写清楚常见问题的解决方案。
（5）编码实战：
尽可能的去寻找在真实项目中在用的。如果你能找到某个网站在用你说的知识点，这是最好的。学以致用，否则当成练习题就没有意义了。多准备一些demo，讲解过程中将知识点和demo结合，便于大家理解所讲解的知识点。
（6）拓展思考：
知识点之外的拓展思考，由分享人进行讲解，这些东西就是所谓的深度，也是一个人技术水准高低比较的表现。
（7）参考文献：
引入参加文献的时候，在引用的句子后面加上序号【1】。参考文献中列出详细来源。不要去抄别人的东西，这是一个基本的态度。
（8）更多讨论：
Q1：提问人：问题？
A1：回答人（可以是分享人，也可以是其他学员）：回答
Q2：提问人：问题？
A2：回答人（可以是分享人，也可以是其他学员）：回答
Q3：提问人：问题？
A3：回答人（可以是分享人，也可以是其他学员）：回答
（9）鸣谢：
感谢XX、XX师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
大家好，我是IT修真院成都分院第20期的学员万晶，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网js任务一，深度思考中的知识点——id和class有什么区别？
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1、背景介绍
id和class
用css制作网页时，都会用到class和id来设置样式，它们都可以改变网页的样式，我们应该知道什么时场合使用class，什么时候用id。下面介绍一下两者的用法。
2.知识剖析
类选择器和id选择器
1.class称为类选择器，可以为元素定义样式，它可以同时在多个标签中使用，为它们设置相同样式。
2.ID选择器，identity是身份的意思，如同我们的身份证一样，它具有唯一性，在网页中只能使用一次。
3.class在css中以小写的"."来命名，比如".color"。id以"#"号命名，如"#name",对大小写敏感。
3.常见问题
两者的优先级及场景使用
4.解决方案
id选择器的优先级要大于class选择器的优先级,如果加了!important,情况又将不同，它的优先级将高于id。
5.编码实战
<div class="box">
<p id="word" class="live">苟利国家生死以</p>
<p class="name">岂因祸福避趋之</p>
<p class="text">我寄愁心与明月</p>
<p class="text">随风直到夜郎西</p>
<p class="game data">jojo我不做人啦</p>
<p class="game">但是我拒绝</p>
</div>
.box #word {
background-color: red;
color: #222222;
font-size: 40px;
}
.live {
background-color: yellow!important;
color: #222222;
font-size: 40px;
}
.game {
background-color: black;
}
.data {
background-color: #888888;
}
6.扩展思考
1.如何选取子class
2.jQuery中如何调用class和id
7.参考文献
参考一：https://www.xuewangzhan.net/webqd/16232.html
参考二：https://www.runoob.com/css/css-id-class.html
参考三：https://www.php.cn/js-tutorial-367717.html
8.更多讨论
Q：什么时候用class比较好，什么时候用id比较好。
A：一般我们写css时常使用class，使用js时使用id，因为它具有唯一性。
Q：一个标签有两个class类名会怎样？
A：后者的样式会覆盖前者，同时两者独有的样式会保存下来。
Q：jQuery如何修改css样式
A：使用$("#id名")或者$(".class名")获取到id或class，再修改样式即可。
9.结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖！
请您登录 后进行评论
