Css的三大机制(特性):特殊性、继承、层叠详解

继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用那些值时,用户代理(浏览器)不仅要考虑继承,还要考虑声明的特殊性(specificity),另外需要考虑声明本身的来源。这个过程就称为层叠(cascade)。在此我们将讨论css这三种机制的原理和关联。

一、特殊性

考虑以下2对规则,假设每一对规则都匹配同样的元素:

h1 {color: red; }
body h1 { color:green;}
h2.grape {color: purple;}
h2 {color: siver;}

每一对规则中只有一个能胜出,因为所匹配的颜色只能是一种颜色,那么怎样知道哪一个规则会更强呢?答案就在于每个选择器的特殊性。

1.特殊性值:

选择器的特殊性由选择器本身的组件确定。特殊性的值表述为4个部分: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。

特殊属性计算值:

h1 {color: red;}/*specificity=0,0,0,1*/
p em {color:purple;}/*specificity=0,0,0,2*/
.grade{color:purple;}/*specificity=0,0,1,0*/
*.bright{color:yellow;}/*specificity=0,0,1,0*/
div#header [href]{color:black;}/*specificity=0,1,1,1 包涵一个属性选择器*/

2.重要性!important

有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入

! important来标志。

P {color ; red ! important; background: yellow}

二、css继承性

1、

上图中包含两个列表,一个无序,一个有序。将生明 color:gray;应用到body元素时,这个元素会采用该声明。这个值再沿着树向下传播到后代元素,并一直继续,直到没有更多得后代元素继承这个值为至。(元素不会把值向上传递到其祖先,但是有一个例外,应用到body元素的背景样式可以传递到html元素。)

2、可以继承的属性

css中可以继承的属性概括为——所有关于文字图片大小样式的属性可以继承( 例如:letter-spacing、word-spacing、white-space、line-height、color、font等)

3、继承属性的特殊性

继承的值没有特殊性,甚至连0特殊性都没有。


三、层叠

如果特特殊性相等的两个规则同时应用到同一个元素,浏览器会怎样解决这个冲突呢?如

h1 {color: red;}
h1 {color:blue;}

这两个规则的特殊性都是0,0,0,1,所以他们的权重相等。但是一个元素不可能即是红色又是蓝色,这时就要应用层叠规则。

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

2、按显示权重对应用到该元素的所有声明排序。标志(!important)的规则的权重要高于没有(!important)标志的规则。按来源对应用到元素的所有生明排序,创作人员>读者>用户代理。

权重由大到小的顺序为:

  • a、读者的重要声明。

  • b、创作人员的重要声明。
  • c、创作人员的正常声明。
  • d、读者的正常声明。
  • e、用户代理声明。

3、按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。

4、按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的声明在后。

四、总结

层叠样式表中最基本的方面就是层叠——冲突的声明要通过这个层叠过程排序。

读者的重要声明(!important)>创作人员的重要声明(! important)>内联样式(1,0,0,0)>id选择器(0,1,0,0)>类选择器、属性选择器、伪类选择器(0,0,1,0)>元素选择器(0,0,0,1)>

通配符选择器(0,0,0,0)>继承的属性>浏览器默认样式。

时间: 2024-08-25 23:46:50

Css的三大机制(特性):特殊性、继承、层叠详解的相关文章

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

【Hibernate步步为营】--继承映射详解

上篇文章讨论了多对多映射,在使用多对多映射时重点是使用<many-to-many>标签,并在标签的两端加入外键这样在生成关系时会创建两个关系之间的关系表,通过关系表来维护它们之间的关系,另外对于单向和双向的区别是在映射的哪一端添加标签的问题.在面向对象中很重要的一个特性就是继承,继承实现了代码的复用,而且Hibernate把基本上所有的对象模型进行了映射封装,其中就包括继承映射,接下来就详细讨论. 一.继承映射 继承是面向对象很重要的特性,它实现了代码的服用,在关系模型中同样也有继承关系,这种

java笔记--反射机制之基础总结与详解

一.反射之实例化Class类的5种方式: java的数据类型可以分为两类,即引用类型和原始类型(即基本数据类型). 对于每种类型的对象,java虚拟机会实例化不可变的java.lang.Class对象. 它提供了在运行时检查对象属性的方法,这些属性包括它的成员和类型信息. 更重要的是Class对象是所有反射API的入口. Class类是泛型类,可以使用@SuppressWarnings("unchecked")忽略泛型或者使用Class<V>类型. 获得Class对象的5种

Android-- Android事件机制之二:onTouch详解

Android事件机制之二:onTouch详解 在其中对OntouchEvent中的总结中,不是很具体.本文将主要对onTouch进行总结. onTouch是Android系统中整个事件机制的基础.Android中的其他事件,如onClick.onLongClick等都是以onTouch为基础的. onTouch包括从手指按下到离开手机屏幕的整个过程,在微观形式上,具体表现为action_down.action_move和action_up等过程. onTouch两种主要定义形式如下: (1)在

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次写的详细一点,把各个部位都拆出来分析. 第一步:头部轮廓 <header></header> .ultraman header

css中的px、em、rem 详解

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

JavaScript 继承方式详解

js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 在面向对象的语言中,我们使用类来创建一个自定义对象.然而js中所有事物都是对象,那么用什么办法来创建自定义对象呢?这就需要用到js的原型: 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版