四个步骤看CSS计算每一个样式属性的权重_第1页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、四个步骤看css计算每一个样式属性的权重第一步，遍历全部挑选器扫瞄器在渲染某个html元素时，首先会寻觅全部作用在该元素上的有效css挑选器，为此，它按照指定的媒体类型（media type）遍历全部的样式表来源，挑选器的来源包括：用户代理（扫瞄器）样式、作者样式和用户样式。常用的media type包括all/screen/print，可以通过如下的方式定义：扫瞄器样式也就是扫瞄器自身设置用来显示网站的默认样式，不同的扫瞄器可能有不同的样式表，例如chrome和ie、firefox的就不一样，所以大家分离用法这些扫瞄器拜访同一个网站的时候，看到实际效果可能就不尽相同。用户样式扫瞄器还允许用户

2、设置网页的样式，例如，我们用ie扫瞄网站的时候，都可以通过扫瞄器查看菜单下的样式或者文字大小子菜单来设置网页实际的显示效果。其次步，比较样式属性的重要性通常状况下，作者样式具有最高的重要性，第二是用户样式，最后才是扫瞄器样式，但是假如浮现了!important标志的话，那么规章会被转变，通过!important 可以提高某种样式的重要性，让它的优先级高于其他没有加该声明的全部样式。下面是样式属性的重要性挨次（由高至低）：1. 标志为!important的作者样式2. 标志为!important的用户样式3. 作者样式4. 用户样式5. 扫瞄器（用户代理）的默认样式第三步，比较样式属性的详细性(

3、specificity)详细性可以通过一个简化易用的1000法则来计算内联样式（inline styling） 权重 1000id（id） 权重 100类（.class） 权重 10标签（tag） 权重 1然后你可以把多个挑选器的权值相加，来得到终于的specificity：p 详细性 1 (1个标签挑选器)div p 详细性 2 (2个标签挑选器, 1+1)tree 详细性 10 (1个类挑选器)div p.tree 详细性 12 (2个标签挑选器 + 1个类挑选器, 1+1+10)baobab 详细性 100 (1个id挑选器)body content .alternative p 详细性 112 (标签挑选器 + id挑选器 + class挑选器 + 标签挑选器, 1+100+10+1)挑选器详细性的完整计算公式要比上面复杂得多，但了解上面的法则在普通状况下已经足够。第四步，推断样式属性浮现的先后挨次这一步最容易，浮现晚的挑选器将拥有高优先级，也就是后来者居上。对于外部引入的样式表，import比link拥有更高的优先级，不管它是否浮现在link引入之后。理解了上述的优先级计算规章，我们应当可以判断出前面例子中p元素的终于色彩：introduction color: red;.

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论