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)>继承的属性>浏览器默认样式。
特例:<a>元素的color、text-decoration属性,以及标题元素的font-size 属性,浏览器默认的样式优先级>继承属性的优先级。
Css的三大机制(特性):特殊性、继承、层叠详解的更多相关文章
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- java继承基础详解
java继承基础详解 继承是一种由已存在的类型创建一个或多个子类的机制,即在现有类的基础上构建子类. 在java中使用关键字extends表示继承关系. 基本语法结构: 访问控制符 class 子类名 ...
- C++的三种继承方式详解以及区别
目录 目录 C++的三种继承方式详解以及区别 前言 一.public继承 二.protected继承 三.private继承 四.三者区别 五.总结 后话 C++的三种继承方式详解以及区别 前言 我发 ...
- 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)
[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...
- C#简单继承示例详解——快速入门
在面向对象当中继承是非常重要的,也是面向对象的三大特性之一(继承.封装.多态),今天我们来揭开他的神秘面纱. 话不多说,我们上菜. using System; using System.Collect ...
- 14.LINUX-platform机制实现驱动层分离(详解)
版权声明:本文为博主原创文章,未经博主允许不得转载. 本节目标: 学习platform机制,如何实现驱动层分离 1.先来看看我们之前分析输入子系统的分层概念,如下图所示: 如上图所示,分 ...
- web前端学习(三)css学习笔记部分(6)-- 选择器详解
9.选择器详解 9.1 属性选择器 CSS3 属性选择器,在 CSS3 中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概 ...
- 2020你还不会Java8新特性?方法引用详解及Stream 流介绍和操作方式详解(三)
方法引用详解 方法引用: method reference 方法引用实际上是Lambda表达式的一种语法糖 我们可以将方法引用看作是一个「函数指针」,function pointer 方法引用共分为4 ...
随机推荐
- 【转】Windows按键消息—虚拟键码
来源:http://c.biancheng.net/cpp/html/1253.html 虚拟键码保存在WM_KEYDOWN.WM_KEYUP.WM_SYSKEYDOWN和WM_SYSKEYUP消息的 ...
- php访问方法外变量
class Capture { private static $_CapSite = 222; function dd() { echo self::$_CapSite; } } $cc=new Ca ...
- 《Linux内核分析》 week5作业-system call中断处理过程
一.使用gdb跟踪分析一个系统调用内核函数 1.在test.c文件中添加time函数与采用c语言内嵌汇编的time函数.具体实现请看下图. 2.然后在main函数中添加MenuConfig函数,进行注 ...
- jq原创幻灯片插件slideV1.0
jq各种插件层出不穷,当然幻灯片插件也不例外,于是本人也自已写了一款,对于目前所做项目来说,足够用了,slideV1.0插件使用很简单,配置如下: 1.三种按钮类型接口选择(默认类型.数字类型.缩略图 ...
- 3.4 C与汇编程序的相互调用
为了提高代码执行效率,内核源代码中有些地方直接使用了汇编语言编制.这就会涉及在两种语言编制的程序之间相互调用的问题. 函数调用包括从一块代码到另一块代码之间的双向数据传递和执行控制转移.数据传递通过函 ...
- iOS中常用的四种数据持久化方法简介
iOS中常用的四种数据持久化方法简介 iOS中的数据持久化方式,基本上有以下四种:属性列表.对象归档.SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 ...
- iOS 3D Touch功能 3 -备
新的触摸体验——iOS9的3D Touch 一.引言 二.在模拟器上学习和测试3D Touch 附.SBShortcutMenuSimulator的安装和使用 三.3D Touch的主要应用 四.3D ...
- 无线通信技术协议-Zigbee 3.0
物联网的无线通信技术有:短距离的无线局域网通信技术和长距离的无线广域网通信技术. 短距离局域网通信技术有Zigbee.Wi-Fi.Bluetooth.Z-wave.6LoWPAN等. 长距离广域网通信 ...
- uva 10026 Shoemaker's Problem
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- ALTIUM 10 过孔设置开窗、不开窗
大家或许会发现我们公司做的PCB板子,所有的过孔都开了窗,也就是说过孔没有绿油,这样会导致焊接中容易连焊.兴许大家为此吃进苦头,我是被整了好几次,查了好久却发现是个低级错误,一个过孔连焊到隔壁焊盘了. ...