



全文预览已结束
下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
仁人教育全面讲解CSS优先级规则附实例本文和大家重点讨论一下CSS优先级,既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个规则就是本次所需要讲的重点。 关于CSS优先级的详细解说 在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。简单说来,CSS是层叠样式表(Cascad本文和大家重点讨论一下CSS优先级,既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。关于CSS优先级的详细解说在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。简单说来,CSS是层叠样式表(CascadingStyleSheets)的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,应该很少没有听说过CSS了,因为在制作网页过程中我们经常需要用到。我们能通过CSS为文档设置丰富且易于修改的外观,以减轻网页制作者的工作负担,从而减轻制作及后期维护的代价。其实现在还来讲CSS是什么,CSS有什么作用完全是多余的,相信从事网页制作的朋友都已经或多或少的接触过了。言归正传,开始进入今天的话题。一、什么是CSS优先级?所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。二、CSS优先级规则既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:1、统计选择符中的ID属性个数。2、统计选择符中的CLASS属性个数。3、统计选择符中的HTML标记名个数。最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数(css2.1是用4位数表示)。(注意,你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。例如:1、每个ID选择符(#someid),加0,1,0,0。2、每个class选择符(.someclass)、每个属性选择符(形如attr=value等)、每个伪类(形如:hover等)加0,0,1,0。3、每个元素或伪元素(:firstchild)等,加0,0,0,1。4、其它选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。三、特性分类的选择符列表以下是一个按特性分类的选择符的列表:单从上面这个表来看,貌似不大好理解,下面再给出一张表:通过上面,就可以很简单的看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100,继承的权重为0(后面会讲到)。按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。优先级问题其实就是一个
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 东海杯考试题及答案
- 电大商法考试题及答案
- 团队沟通与协作能力提升培训工具
- 《光学现象与应用:光的折射与反射教案》
- 信息安全防护措施执行模板
- 乡村振兴护理员考试题库及答案
- 大学vb考试题及答案
- 学术研究诚信保障责任书9篇范文
- 数据分析基础模型及处理流程模板
- 旅游景点综合评价报告表
- 2025全国科普日科普知识竞赛题库及答案
- 2025企业劳动合同范本新版
- 舞蹈老师自我介绍课件
- 2025年吉林省教育系统校级后备干部选拔考试题及答案
- 社区安全知识培训资料课件
- 徐学义基础地质调查课件
- 2025主题教育应知应会知识题库及答案
- 无人机航空安全知识培训课件
- 警用侦查无人机在侦查行动中的应用分析报告
- 2024年春季云南省高中学业水平合格性考试化学试卷真题(含答案)
- 2025年秋招:招商银行笔试真题及答案(可下载)
评论
0/150
提交评论