爱易网
IT新闻
IT新闻
爱易资讯
网站搭建
云虚拟主机教程
云服务器教程
Apache教程
IIS教程
Nginx教程
网站策划
站长文章
推广教程
淘宝客教程
网页设计
HTML教程
XHTML教程
CSS教程
HTML5教程
CSS3教程
JavaSript基础
JQuery教程
Node.js教程
前端技术
Ajax教程
Js特效
Xml教程
平面设计
页面UI设计
photoshop教程
程序开发
AI人工智能
Asp教程
Php教程
Asp.Net教程
Net Core教程
C#教程
Java教程
Jsp教程
开发技术
微信小程序教程
Uniapp开发教程
微信公众号开发
Andriod教程
IOS教程
DOS教程
Python教程
Docker教程
Windows Container教程
数据库
MSSQL教程
MySQL教程
Redis教程
Access教程
Oracle教程
数据库教程
操作系统
Linux教程
Windows教程
MAC教程
Cisco教程
交换机教程
防火墙教程
搜索
爱易网页
HTML教程
{{CSS}}构造和层叠
{{CSS}}构造和层叠
日期:2014-05-17 浏览次数:20656 次
{{CSS}}结构和层叠
每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素。有了这个结构树,选择器才能起作用,这也是CSS继承的核心。继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程称为层叠。
1.特殊性
每个选择器都有特殊性,对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。若一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明将胜出。
选择器的特殊性由选择器本身的组件确定。特殊性表述分为4个部分,如0,0,0,0。一个选择器的具体特殊性如下确定:
1)对于选择器给定的各个ID属性值,加0,1,0,0
2)对于选择器给定的各个类属性值,属性选择或伪类,加0,0,1,0
3)对于选择器给定的各个元素和伪元素,加0,0,0,1
4)结合符和通配选择器对特殊性没有任何贡献。其特殊性为0,0,0,0,但这与根本没有特殊性(继承没有特殊性)有本质区别。
5)一般地,第一个0是为内联样式表声明保留的,它比所有其他声明的特殊性都高。其特殊性为1,0,0,0。(为内联样式表声明保留一位是CSS2.1才加上的)
2.重要性
有时某个声明可能很重要,超过了所有其他声明,CSS2.1称之为重要声明,并允许在这些声明的结束分号之前插入!important来标志。
标志为!important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。实际上,所有!important声明会分组在一起,重要声明的特殊性冲突会在重要声明内部解决,而不会与非重要声明相混。类似地,我们认为所有非重要声明也归为一组,使用特殊性来解决冲突。若一个重要声明和一个非重要声明冲突,胜出的总是重要声明。
3.继承
基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。继承是CSS中最基本的内容,除非有必须,否则一般不会特别考虑。不过需要注意以下几点:
1)注意有些属性不能被继承,这往往归因于一个简单的常识。一般地,大多数框模型属性(包括外边距,内边距,背景和边框)都不能被继承。
2)继承的值根本没有特殊性,甚至连0特殊性都没有。如下:
*{color:gray;}
h1#page-title{color:black;}
<h1 id="page-title">Meetkat <em>CEntral</em><h1>
<p>Welcome to the best place on the web</p>
因为通配选择器适用于所有元素,而且有0特殊性,其颜色声明指定的值gray要优先于继承值(black),因为继承值根本没有特殊性。故em元素会显示为灰色而不是黑色。
4.层叠
CSS所基于的方法是让样式层叠在一起,这是通过继承和特殊性做到的,CSS2.1的层叠规则如下:
1)找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器
2)按显式权重对应用到给定元素的所有声明排序。标志!important的规则的权重高于没有!important标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员,读者,用户代理。正常情况下,创作人员的样式要胜于读者的样式表,有!important标志的读者样式要强于所有其他样式,这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。
3)按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重重要大于较低特殊性的元素。
4)按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中有导入样式表的话,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后。
接下来对2)3)4)详细说明:
2)按权重和来源排序
若两个样式规则应用到同一个元素,而且其中一个规则有!important标志,这个重要规则将胜出。在声明权重方面要考虑5级,权重由大到小的顺序依次为:
1.读者的重要声明
2.创作人员的重要声明
3.创作人员的正常声明
4.读者的正常声明
5.用户代理声明
3)按特殊性排序若
若向一个元素应用多个彼此冲突的声明,而且它们的权重相同,则要按特殊性排序,最特殊的声明最优先。
4)按顺序排序
若两个规则的权重,来源和特殊性完全相同,那么在样式表中后出现的一个会胜出。特别地,认为元素style属性中指定我样式位于文档样式表的最后,即放在所有其他规则的后面。不过,这一点已经没有意义了,因为CSS2.1明确指明内联样式的特殊性要高于所有样式表选择器。
正是由于这种按顺序排序,所以才有了通常推荐的链接样式顺序:link-visited-hover-active(LVHA)。
:link{color:blue;}
:visited{color:purple;}
:hover{color:red;}
:active{color:orange;}
这四个选择器的特殊性都是一样的:0,0,1,0。因为它们有相同的权重,来源,特殊性,故与元素匹配的最后一个选择器才会胜出。
正在“点击”的未访问链接可以与其中3个规则匹配——:link,:hover,:active——所以在这三个规则当中最后声明的一个胜出。若按照LVHA顺序,:active将会胜出,这也正是所期望的。
5.非CSS表现提示
文档有可能包含非CSS的表现提示,例如font元素。非CSS提示被处理为特殊性为0,并出现在创作人员样式表的最前面。只要有创作人员或读者样式,这种表现提示就会被覆盖,但用户代理的样式不能将其覆盖。
上一篇: 说说标准系列目录
下一篇: Extjs htmleditor中内容导出成word (2)
免责声明:
本文仅代表作者个人观点,与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
相关资料
更多>
css表格边框有关问题
web 标准的传媒播放器代码 文件地址放在哪里
高人!如何去掉 div获取焦点时的虚线框
https页面iframe嵌套http的页面,弹出警告,如何解决
单点登录(可以跨域),该如何解决
请推荐网页格局设计的书
Css实现Div绝对右上角定位
Mozilla提议的CSS书写顺序
关于css-的打包、继承、多态
推荐阅读
更多>
新手 问个比较弱智的有关问题 小弟我用img标签插入图片显示不出来时咋回事
有大事,好人帮帮忙,该怎么处理
保存htm文件,打开占很多CPU有关问题
css中的z-index设立999,不能完全显示出来,被盖住了
小弟我这个样式如何不起作用?(li标签加下划线)
史下最全的浏览器CSS&JS Hack手册
百度mapApi进阶教程-创建标注和自定义标注3.html
第11章 HTML5将来展望
超链接文字的 右首有个图片,是用css弄在一起的吗
高分求解,刚用div+css做了一个页面,在ie7下正常显示,但是用ie6打开就变形了,谁能帮小弟我看下
寻找优秀网页UI设计师(北京),该如何处理
请问在查询页面点击查询后在原页面框架调用查询结果
请教有没一种固定版本的浏览器
表格(Table)
jsp生成html资料
惯用的html标签
留言界面一种绚丽效果的实现
高速学习xhtml
css设定表格的单元格高度为什么无效呢?该如何解决
css语法异常导致firefox上css部分失效的有关问题