问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501

在网页制作中,CSS样式的ID选择器和Class选择器使用过程中有什么限制吗?

发布网友 发布时间:2022-04-06 12:27

我来回答

4个回答

懂视网 时间:2022-04-06 16:48

我经常使用id和class来指定应用样式的范围。但是,很难确定是否正确使用id或class,本篇文章我们就来介绍一下id和class的的用法。

id和class之间的区别

id具有唯一性,class可以有很多个

页面中只能写入一个ID,但是对于class可以写入多个。

但是,这并不意味如果页面只显示一个就必须使用id。id的使用存在约束。

如果id和class有样式冲突,则id优先

让我们举一个例子来看一下。

HTML

<p id="red" class="blue">ID和class优先级比较——文字颜色</p>

CSS

#red{
color:red;
}
.blue{
color:blue;
}

效果如下:

360截图20181117113530790.jpg

上图显示的字体是红色的,那是因为id的优先级比class的优先级高,所以最终显示的颜色是红色。

可以在页面内跳转到id

通过链接到id,您可以跳转到相应的id位置。

<a name="#ananker name">跳转到id </a>

经常利用这个在页面开头设置跳跃功能。

可以在哪里使用id

首先,作为大前提,class的使用没有限制,但是id有约束。

坦白地说,经常也可以这样做,即使你在没有使用id的情况下用class描述的话也没有问题,因此,与其考虑如何区分使用,不如考虑在哪里使用id。

使用id的地方是“唯一的”或者是“最好做的”。

当你想要添加页内跳转功能时

使用页内跳转功能时,请使用id,因为它无法用class实现。

用于可以设置“唯一”的地方

页面中基本上只有一个页面部分,例如标题,内容,侧边栏,页脚。这样的东西利用id比较容易实现。

总结class中的常用部分,用id覆盖样式

这是一种利用CSS的规格,其中id优先于class。

网页根据页有一定的布局,但是有很多相似的部分。您可以通过将标准样式编写为class并使用id编写每个页面的特征部分来压缩CSS。

id的选择器匹配过程更快

当使用jQuery等执行选择器匹配处理时,指定id时速度更快。这是因为,如果它是由id指定的,那么在页面中找到它就可以完成处理,而如果是class的话则需要扫描到结尾。

热心网友 时间:2022-04-06 13:56

一、ID与CLASS的使用原则

据说W3C对于ID与CLASS的设定是ID具有唯一性,CLASS具有普遍性。所以我们这里的使用原则也是依据这一特性建立的。

ID是不能重复的,所以在XHTML的结构中,大结构一定是用ID。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#logo , #nav , #content , #copyright 这些是雷打不动的命名。有人说布局排版用ID,配色背景用CLASS,其实这是不正确的,ID与布局排版没有直接关系,CLASS与配色也不是对等的。有人呢为了麻烦全都用ID或是全都用CLASS,全都用CLASS呢还有可理解,全都用ID就不正常了,这有悖ID唯一性。如果每个ID都不一样,那非累死不可。我通过实践总结的使用原则是:ID需要具有唯一性,并且尽量在外围使用。而CLASS具有可重复性,并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改,这样的做法就会让所有的CLASS都成为ID的子级或是孙级。

你可以有两个儿子但你能有两个爸爸吗,就是这个道理。在我们写CSS的时候可以写成这样 #father .child {…} 尽量不要让Class包含ID,.father #child {…}如果写成这样显得有点可笑 。当然这也不是铁定的,特殊情况需要特殊对待嘛。但是通常情况下这种形式的必要性不大。

以上就是ID与CLASS使用原则,归总起来一句话:ID是唯一的并是父级的,CLASS是可以重复的并是子级的。

二、ID与CLASS的使用技巧

1、子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。

2、CLASS中的子级最好不用ID。当然特殊情况特殊对待。

3、CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。

其实上面讲的都是一些大家都明白的内容,只是我捡了个漏先写下来算是一个总结。希望大家对于ID与CLASS的使用提出自己的新观点新思路。一起总结出最适合也最有效率的规范来。

热心网友 时间:2022-04-06 15:14

ID选择符:唯一标识符的ID作为选择符 适合标识在网页中只用一次的样式
Class类选择符:定义一类样式 适合重复使用,同时可以为一个对象指定多个class类,对减少样式 重复使用有重要作用。

热心网友 时间:2022-04-06 16:49

id是唯一的,class可以在一个页面上应用很多次,而id只能1次,id用于显示比较特殊的地方,比如:你想让1个文本框长度颜色都和默认的不一样,你就可以用id定义它的属性,打个比方,默认文本框长度都是15的话,你可以用id定义这1个文本框的长度为20。class就在于定义一次可反复用,1改全改,方便维护,id你必须1个1个改,
声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com
如果银行拒贷有哪些办法 小天鹅滚筒洗衣机水位多少合适 阴阳师百闻牌攻略大全 百闻牌式神卡组阵容大全 阴阳师百闻牌三大妖狐阵容推荐 妖狐流派怎么搭配?-新手攻略-安族网... 阴阳师百闻牌妖狐快攻阵容 怎么搭配攻略推荐 阴阳师百闻牌妖狐技能攻略 妖狐属性及卡组搭配推荐-新手攻略-安族网... 阴阳师百闻牌妖狐最强卡组 阵容怎么搭配攻略 阴阳师百闻牌妖狐卡组推荐 怎么搭配攻略分享 带鹏字的公司名字大全 鹏字开头公司起名 叶罗丽娃娃玩具店在哪 当好班主任的有效方法 如何当好班主任? 没有工作经验刚毕业的老师,该如何当好一个班主任? 如何当好班主任 陕西师范大学网络与新媒体专业 大同大学的网络与新媒体专业和山西传媒学院的网络与新媒体专业那个好? 大专有网络与新媒体专业吗?或者这个专业在大专里有另外专业名? 河南网络与新媒体有大专吗 第一次用社保卡怎么激活 社保卡首次使用需要激活吗 移动硬盘摔了后读不出来了,怎么办? 移动硬盘坏了,读不出来了 有哪些外国诗集较为著名 谁能推荐几部外国著名的诗集(关于天堂地狱神鬼之说的)? 推荐一部外国诗集并说说推荐理由 推荐几部外国诗人的著名诗集。 有哪些比较好的外国诗歌文集没有 问一个外汇问题,当我的可用预付款为负值的时候,也就说开始亏保证金,这样会不会被福汇FXCM强行平仓? 推荐几个比较好的外国诗集吧 炒外汇杠杆,亏了要被人讨债吗 如何当好一个好班主任 浅谈如何当好班主任 怎样才能当好班主任。 浅谈如何当好一名班主任 如何当好班主任:用心方可动心 如何做好新生班主任 怎么在excel表中的某一列单元格内粘出自己想要的合同号啊 excel里怎么筛选出最新合同号 EXCEL表里同个订单号怎么自动提取相应的合同号?? 在EXCEl表中如何自动给聘用合同书编号?急!急!急! excel如何快捷录入非连续的合同编号? EXCEL表格中合同编号怎么自动递增 如图,怎么用公式弄出来excel里的合同号和每个合同号对应的总金额,因为有上千个合同号手拉太麻烦了 怎么用excel表格整理合同方便以后查找合同原件?方便的话也可以发到我的邮箱624140256@qq.com WPS excel如何将合同号根据日期自动更新 如何用EXCEL函数求各月合同的起止编号 现在的QQ安全中心没有密保问题了吗?被取消了吗? 我的QQ本来搞了密保的,怎么现在自己没有了? qq现在没有密保问题设置了吗,就是有你爸你妈名字生日你班主任影响最大的人什么的那些问题的那个设置 QQ设置的密保没用了吗?还能找回来吗?