CSS:结构和层叠

特殊性

特殊性(specificity:对于每个规则,用户代理会计算选择器的特殊性并将特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明,有最高特殊性的声明就会胜出。

选择器的特殊性由选择器本身组件确定,特殊性值表述为4个部分。特殊性排序从左向右,特殊性值为1,0,0,0大于以0开头的所有特殊性值,不论后面的数是什么,以此类推。

对于选择其中给定的各个ID属性值+(0,1,0,0)

对于选择器中给定的各个类的属性值、属性选择或伪类+(0,0,1,0)

对于选择器中给定的各个元素和伪元素+(0,0,0,1)

结合符(无特殊性)和通配选择器(0特殊性 i.e. 0, 0, 0, 0)对特殊性没有贡献。(0特殊性>无特殊性)

e.g.

h1 {color: red;} /*0, 0, 0, 1 */
p em {color: purple;} /* 0, 0, 0, 2 */
.grape {color: purple;} /* 0, 0, 1, 0 */
*.bright {color: yellow;} /* 0, 0, 1, 0 */
p.bright em.dark {color: maroon;} /* 0, 0, 2, 2 */
#id216 {color: blue;} /* 0, 1, 0, 0 */
div#sidebar*[href] {color:silver;} /* 0, 1, 1, 1 */

注意:ID选择器和指定id属性的属性选择器不同。

e.g. ID选择器(#answer +0, 1, 0, 0),属性选择器([id=”totals”] +0, 0, 1,0)。

最高位为0是为内联样式声明保留的,每个内联声明的特殊性都是1,0,0,0,比所有其他声明的特殊性要高。

E.g.

<h1 style=”color:green;”>

重要性

重要声明:有时某个声明可能非常重要,超过了所有其他声明,在这些重要声明最后结束分号之前插入!important来标志。如果没有放在声明最后(i.e.分号前面),则整个声明都将无效。

e.g.

p.dark {color:#333 !important; background:white;}

如果需要将多个声明都标志为重要,需要为每个声明添加自己的!important标识。

e.g.

p.dark {color: #333 !important; background: white !important;}

所有标识!important的声明会分组在一起,其特殊性冲突会在重要声明内部解决,不会与非重要声明混合。如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明。

继承

基于继承机制,样式不仅应用到指定元素,还会应用到它的后代元素。

大多数框模型属性(外边距、内边距、背景和边框)都不能继承。

继承值根本没有特殊性,即低于0特殊性的通配符。所以,通配选择器往往有一种短路继承的效果,应避免不加区别地使用通配选择器。

层叠

CSS2.1层叠规则

1. 找出所有相关规则,这些规则都包含与一个给定元素匹配的选择器。

2. 按显式权重对应用到该元素的所有声明排序

标志!important>未标志!important

正常情况下创作人员样式>读者样式

有!important标识的读者样式>所有其他样式(包括有!important标识的创作人员样式)

创作人员样式或读者样式>用户代理默认样式

权重排序:读者重要声明>创作人员重要声明>创作人员正常声明>读者正常声明>用户代理声明

3. 按特殊性对应用到给定元素的所有声明排序,较高特殊性>较低特殊性

4. (如果特殊性相等)按出现顺序对应用到给定元素的所有声明排序,声明在样式表或文档中越后出现权重越大。(一般认为导入样式表中声明在前,主样式表中声明在后)。

因此可得出推荐采用link-visited-hover-active (LVHA) 顺序声明的原因。

非CSS表现提示的特殊性为0,可被创作人员或读者样式覆盖。

原文地址:https://www.cnblogs.com/RDaneelOlivaw/p/9077184.html

时间: 2024-10-31 16:18:30

CSS:结构和层叠的相关文章

CSS结构和层叠

每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素.有了这个结构树,选择器才能起作用,这也是CSS继承的核心.继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程称为层叠. 1.特殊性 每个选择器都有特殊性,对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明.若一个元素有两个或多个冲突的属性声明,那么有最高特殊性

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

[转]深入理解CSS中的层叠上下文和层叠顺序

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显

深入理解CSS中的层叠上下文和层叠顺序

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什

初学者用div+css结构写网页的几个误区

1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义,网页代码修改起来比较麻烦. 在写一些栏目块时,特别是数据分类较多,比如“求购信息”的栏目块,顶部可能出现“发布人.发布时间.信息标题.联系方式”等项目,像这样的地方建议还是要用table来写,因为table是专门用来写数据表格的,控制起来很方便,而且符合语义要求,还有页面中出现类似

css优先级和层叠

css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择器的数量    假设a,b,c,d的权重分别为1000,100,10,1    那么有: 2.css层叠 了解了css的优先级,这时候我们就不得不提css中的层叠(此时考虑的还不涉及到z-index),我们应该知道如下几点:        1.当优先级相同,属性名相同时,后面的样式会覆盖前面的样式 

[读书笔记] CSS权威指南2: 结构和层叠

层叠样式表中最基本的一个方面可能就是层叠——冲突的声明要通过这个层叠过程排序,并由此确定最终的文档表示.这个过程的核心是选择器及其相关声明的特殊性,以及继承机制. 特殊性 对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明.如果一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出. 选择器的特殊性由选择器本身的组件确定.特殊性值表述为4个部分,如:0,0,0,0.一个选择器的具体特殊性如下确定: 对于选择器中给定的各个ID属性值,加0,1,0,0. 对

css 权威指南笔记( 五)结构和层叠之三种样式来源

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件我

《CSS权威指南(第三版)》---第三章 结构和层叠

这章主要讲的是当某个对象被选择器多次提取使用样式之后的一些冲突性解决方案: 1.特殊性:指的是当多个效果作用的时候的最终选择: 这个规则用0,0,0,0来比较.其中:内联式是1,0,0,0  ID选择器是0,1,0,0 类选择器,属性选择器和伪类:0,0,1,0 元素和伪元素:0,0,0,1 结合性和通配性对特殊性没有贡献,是0,0,0,0 注意:这里面给出一个特权,某个声明特别重要的时候使用!import 那么它的优先级是最高的. 2.继承:指的是在节点树中,子元素的样式继承父元素. 注意:继

css细节复习笔记——结构与层叠

每个合法的文档都会生成一个结构树,有了结构树元素的祖先.属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心.继承是从一个元素向后代元素传递属性值所采用的机制.面向一个元素使用哪些值时,用户代理不仅要考虑继承,还要考虑特殊性,另外需要考虑声明本身的来源,这个过程就叫层叠. 本文讨论3种机制之间的关联:特殊性.继承和层叠. 特殊性 同一元素可以使用不同的方法来选择元素.但是每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则的个个声明.如果一个元素有两个或多个冲突的属性声明,那么