章节
问答
课签
笔记
评论
占位
占位

类和ID选择器的区别

学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:

相同点:可以应用于任何元素
不同点:

1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

下面代码是正确的:

 <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

而下面代码是错误的:

 <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

下面的代码是正确的(完整代码见右侧代码编辑器)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>

上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。

下面的代码是不正确的(完整代码见右侧代码编辑器)

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>

上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

 

 

任务

单击“提交”按钮进入下一小节学习。

?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / 木城武
只是为了说明通过类选择器可以选多个类罢了。。比如一堆专门设置颜色,有红橙黄绿青蓝紫各种颜色,一堆专门用来设置大小,如果想要用红色大字,可以选一个颜色的,一个字体大小的,而不用把所有的情况都设置成一个特殊的类

最赞回答 / 3117003162张业
<span class="stressi bigsize">三年级</span> 中"stressi bigsize"就是词列表,包含了两个词

最赞回答 / 麦哥
如果写了重复的id选择器是可以识别的,这个仅仅是不提倡这么做,也算是一种规范看到同样的疑问,别人的回复

最新回答 / qq_慕数据1052208
可以写多条,以分号分隔开就行

最赞回答 / 慕村梦花火
id属性具有唯一性,也就是说在一个页面中相同的id只允许出现一次,所以对于关键页面建议使用id;class,顾名思义,就是类的意思,我们可以为同一页面的相同元素或者不同元素设置相同的class,所以对小的地方建议使用class;

最赞回答 / 慕桂英613149
ID选择器不能使用词列表的,另外需要注意选择器的命名规则,必须由字母、数字、下划线和美元符号组成,首字母必须是字母或下划线。所以应该是选择器命名的问题,这样#stress_bigsizeid{font-size:25px}    <span id="stress_bigsizeid">三年级</span>可以实现的

最赞回答 / 未来可期I
抱歉,不需要解答了,我理解了,ID选择器代码中的是错误的,<span> id="stressid  bigszeid"> 是不可以用这种方式写,所以是错误的不显示,可以用类选择器class

最新回答 / 慕粉7522877
旁边那个是用类选择器弄的“三年级”,你应该看下面那个“三年级”的效果,不过多个Id选择器可以这么写<...图片...>

最新回答 / qq_霸气你不懂_hlwFT2
代码编辑器没有用到啊

最新回答 / 詹姆斯周
ID就像身份证一样,是唯一的。调用时,可以多次

已采纳回答 / qq_慕仔4007834
如果写了重复的id选择器是可以识别的,这个仅仅是不提倡这么做,也算是一种规范

最新回答 / 月华恋
功能确实一样,但一个html文档里同一个id只能出现一次,设置属性大多都是直接用类选择器,id选择器在后面的js里用的多一些
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言