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

每个合法的文档都会生成一个结构树,有了结构树元素的祖先、属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心。继承是从一个元素向后代元素传递属性值所采用的机制。面向一个元素使用哪些值时,用户代理不仅要考虑继承,还要考虑特殊性,另外需要考虑声明本身的来源,这个过程就叫层叠

本文讨论3种机制之间的关联:特殊性、继承和层叠。

特殊性

同一元素可以使用不同的方法来选择元素。但是每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则的个个声明。如果一个元素有两个或多个冲突的属性声明,那么最高特殊性的声明会胜出。

特殊性计算规则:

1)对于选择器中给定的各个ID属性值,加0100

2)对于选择器中给定的各个类属性值,属性选择或伪类,加0010

3)对于选择器中给定的各个元素和伪元素,加0001

4)结合符和通配选择器对特殊性没有任何贡献

对于重叠的选择,如果符合多种规则,这些规则将累加计算。0011特殊性优于0001,0100优于0022。这是因为值从左向右排序。

题目:下列选择器同指向同一元素,容器的颜色应该为什么颜色?

div.container  div.bright{background: #996699;}
div.bright{background: #99CCCC;}
div#id216{background: #FFFF66;}
#id216{background: #CC3333;}
div.container div#id216{background: #333399;}

考察特殊性,答案#333399;特殊性分别为:0022,0011,0101,0100,0112

注意:特殊性不是解决冲突的全部,实际上,所有样式冲突的解决都由层叠来处理。

到目前为止,我们只见过以0开头的特殊性。一般地,第一个0是为内联样式声明保留的,他比所有其他声明的特殊性都高。

<div class ="bright" id ="id216" style="background:#003300"></div>

有时候某个声明可能非常重要,超过了所有其他声明,并允许在这些声明的结束分号之前插入!important来标志。

#id216{ background: #990033 !important;}

当样式表增设!important时,内联冲突样式将会失效,以important为准。

继承

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

一般地,大多数框模型属性(包括外边距、内边距、背景和边框)都不能继承,其原因是因为如果这些属性被继承,文档将会变得更加混乱。

继承的值根本没有特殊性,甚至连0特殊性都没有。(0特殊性比无特殊性要强)

不加区别地使用通配选择器可能存在的问题之一,由于他能匹配任何袁术,所以通配选择器往往有一种短路继承的效果。

层叠

如果特殊性相等的两个规则相同同时应用到同一个元素,浏览器会通过层叠解决这个冲突。

css所基于的方法就是让样式层叠在一切,这是通过结合继承和特殊性做到的。层叠的规则:

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

2)按显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有 !important标志的规则。声明权重考虑5级:(权重有大到小顺序依次为)

    1.读者的重要声明

    2.创作人员的重要声明

    3.创作人员的正常声明

    4.读者的正常声明

    5.用户代理声明

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

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

时间: 2024-11-03 20:47:44

css细节复习笔记——结构与层叠的相关文章

css细节复习笔记——浮动

CSS除了能够改变字体.背景和所有其他属性,还能够完成基本布局任务. div+css通过浮动和定位.盒子模型等技术应用,是最常用的布局方式. 定位的基本思想很简单,它允许定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素,另一个元素甚至浏览器窗口本身的位置. 另一方面,css1提出浮动.浮动不完全是定位,不过,他当然也不是正常流布局. 浮动 声明<img src ="b5.jpg" align="right">会导致一个图像浮动到右边,而允许其他

css细节复习笔记——基本视觉格式化

css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个内容区,这个内容区周围包含可选的内外边距和边框(之所以认为是可选,是因为可以设置为0). 对不同类型的元素格式化时存在着差别.块级元素的处理就不同于行内元素,而浮动元素和定位元素也分别有各自不同的表现. 包含块 每个元素都相当于包含块摆放:可以这么说,包含块就是一个元素的”布局上下文“,css2.1

css细节复习笔记——内边距、边框和外边距

一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度 这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确定.正常流中的元素很少有设定的高度. 外边距和内边距 如果元素有背景,则会影响使用内边距和外边距,因为背景会延伸到内边距中,但不会延伸到外边距.为元素指定的内边距和外边距会影响元素的背景何时结束. 为内容区的个边增加10像素空白,margin:10px,类似于html的hspace和vspace,设

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

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

CSS综合复习笔记 01

1.1开发前的准备工作            1.配置开发环境(常用前端开发工具) (1)sublime (2)webstorm (3)vscode (4)hbuilder (5)atom 2.建立项目文件夹(为了将与项目相关的文件放在一起,便于管理和以后的维护) 包括与项目相关的一些文件 (1)主页或是首页(index.html.default.html) (2)css文件夹     (存放css文件) 公用样式css文件的常用命名: [1] base.css [2] global.css (

计算机图形学 复习笔记

计算机图形学 复习笔记 (个人整理,仅做复习用 :D,转载注明出处:http://blog.csdn.net/hcbbt/article/details/42779341) 第一章 计算机图形学综述 研究内容 图形的概念:计算机图形学的研究对象 能在人的视觉系统中产生视觉印象的客观对象 包括自然景物.拍摄到的图片.用数学方法描述的图形等等 图形的要素 几何要素:刻画对象的轮廓.形状等 非几何要素:刻画对象的颜色.材质等 图形表示法 点阵表示 枚举出图形中所有的点,简称为图像. 参数表示 由图形的

[Java基础] Java线程复习笔记

先说说线程和进程,现代操作系统几乎无一例外地采用进程的概念,进程之间基本上可以认为是相互独立的,共享的资源非常少.线程可以认为是轻量级的进 程,充分地利用线程可以使得同一个进程中执行多种任务.Java是第一个在语言层面就支持线程操作的主流编程语言.和进程类似,线程也是各自独立的,有自 己的栈,自己的局部变量,自己的程序执行并行路径,但线程的独立性又没有进程那么强,它们共享内存,文件资源,以及其他进程层面的状态等.同一个进程内的 多个线程共享同样的内存空间,这也就意味着这些线程可以访问同样的变量和

oracle从入门到精通复习笔记续集之PL/SQL(轻量版)

复习内容: PL/SQL的基本语法.记录类型.流程控制.游标的使用. 异常处理机制.存储函数/存储过程.触发器. 为方便大家跟着我的笔记练习,为此提供数据库表文件给大家下载:点我下载 为了要有输出的结果,在写PL/SQL程序前都在先运行这一句:set serveroutput on结构:declare--声明变量.类型.游标begin--程序的执行部分(类似于java里的main()方法)exception--针对begin块中出现的异常,提供处理的机制--when...then...--whe

数据库系统概论 复习笔记。

大学课本复习笔记,知识点总结. 2012-08-15 数据模型中的 型,Type, 学号,姓名.... 值,Value, 0001, Ender..... 数据库系统的三级模式,两级映射, 外模式,External Schema/Sub Schema, 是用户能看得到的直接使用的.一个数据库有多个外模式,应用于用户的不同需求.但每个应用程序只能使用一个外模式.保证安全.每个用户只能访问对应的外模式. 模式,Schema, 是数据库中全体数据的逻辑结构和特征的描述,只涉及 型Type的描述.模式的