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

层叠样式表中最基本的一个方面可能就是层叠——冲突的声明要通过这个层叠过程排序,并由此确定最终的文档表示。这个过程的核心是选择器及其相关声明的特殊性,以及继承机制。

特殊性

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

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,如:0,0,0,0。一个选择器的具体特殊性如下确定:

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

对于选择器中给定的各个类属性值,属性选择或伪类,加0,0,1,0。

对于选择器中给定的各个元素和伪元素,加0,0,0,1。

内联样式,加1,0,0,0。

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

h1{color:red;}/* specifity = 0,0,0,1 */
p em{color:purple;}/* specifity = 0,0,0,2 */
.grape{color:purple;}/* specifity = 0,0,1,0 */
*.bright{color:yellow;}/* specifity = 0,0,1,0 */
p.bright em.dark{color:maroon;}/* specifity = 0,0,2,2 */
#id216{color:blue;}/* specifity = 0,1,0,0 */
div#sidebar *[href]{color:silver;}/* specifity = 0,1,1,1 */
h1+p{color:black;font-style:italic;}/* specifity = 0,0,0,2 */
<h1 style="color:green;">Green</h1> /* specifity = 1,0,0,0*/

重要性

CSS允许在这些声明的结束分号之前插入 !important 来标志。

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

标志为!important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。实际上,所有!important声明会分组在一起,重要声明的特殊性冲突会在重要声明内部解决,而不会与非重要声明相混。如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明。

继承

样式不仅应用到指定的元素,还会应用到它的后代元素。

/*
将声明color :gray;应用到ul元素时,这个元素会采用该声明。这个值再沿着树向下传播到后代元素,并一直继续,直到再没有更多的后代元素继承这个值为止。值绝对不会向上传播,也就是说,元素不会把值向上传递到其祖先。
*/
/*
注意:在HTML中,对于向上传播规则有一个例外:应用到body元素的背景样式可以传递到html元素(html是文档的根元素),相应地可以定义其画布。
*/
ul {
    color: red;
}

一般地,大多数框模型属性(包括外边距、内边距、背景和边框)不能继承。

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

只要id为toolbar的元素只包含纯文本而不包含其他内容,这就能正常起作用。不过,如果这个元素中的文本都是超链接(a元素),用户代理的超链接样式就会占上风。在一个Web浏览器中,这意味着它们的颜色很可能是蓝色,因为浏览器的样式表可能包含以下规则:

a:link {color: blue;}

为克服这个问题,必须如下声明:

#toolbar {color: white; background: black;}

#toolbar a:link {color: white;}通过向工具条中的a元素直接指定规则才可以覆盖默认的规则了。

而通配选择器具有0特殊性,所以一旦应用了通配选择器,它就会覆盖继承的值,所以通配选择器往往有一种短路继承的效果。这说明不加区别的使用通配选择器可能存在奇怪的问题。

层叠

  1. 按显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。
  2. 按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员、读者和用户代理。正常情况下,创作人员的样式要胜过读者的样式。有!important标志的读者样式要强干所有其他样式,这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。
    1. 读者的!important样式
    2. 创作者的!important样式
    3. 创作者的正常样式
    4. 读者的正常样式
    5. 用户代理声明的样式
  3. 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
  4. 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后。
时间: 2024-10-05 05:28:14

[读书笔记] CSS权威指南2: 结构和层叠的相关文章

[读书笔记] CSS权威指南1: 选择器

通配选择器 可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器 指示文档元素的选择器. /*为body的字体设置为红色*/ body { color: red: } 分组 选择器分组 h1, h2, h3 { color: red; } 声明分组 h1 { font: 18px Helvetica; color: purple; background: aqua; } 结合选择器和声明分组 h1, h2, h3 { font

读书总结——CSS权威指南

几个月前读了这本书——<CSS权威指南>,之前用css都是在w3school上看的,或者按F12看别人的代码,这是我完整的读的第一本关于css的书,感觉还是收获挺大的,最近要总结一下自己的知识,所以又重新看了一遍,又本着温故知新.边看边写的想法写了这篇文章,希望能对自己或别人有些帮助. 第一章 HTML 标记与文档结构 主要介绍了HTML及其标记 1.标签分为闭合标签与自闭合标签 闭合标签格式:<标签名>文本内容</标签名> e.g. <h1>Words b

读书笔记----JavaScript 权威指南(一)

0.前言 最近小编我刚刚结束上一段的工作,结果立马就马不停蹄的开始了新一轮的工作了,表示无辜,(o′?ェ?`o),程序猿真是个累死人不偿命的工作呀. 今天晚上看到同事新启封的 JavaScript 权威指南,心血来潮的想,如果我能把这个书里面的重点以及具体知识点梳理出来,那么后来的人是不是就能少走一些弯路呢? 抱着这个想法,于是就开始了今天晚上的读书之旅,更由于小编喜欢整理东西这个习惯,才有了此文. 真心希望看到这篇文章的你,能够感受到小编那深沉的爱!~ 1.JavaScript 语法核心 之

读书笔记-Mycat权威指南-09-全局序列号

全局序列号介绍 在实现分库分表的情况下,数据库自增主键已无法保证自增主键的全局唯一.为此,需要新的实现方式. 本地文件方式 原理:此方式 MyCAT 将 sequence 配置到文件中,当使用到 sequence 中的配置后,MyCAT 会更下 classpath 中的 sequence_conf.properties 文件中 sequence 当前的值. 配置方式: 在 sequence_conf.properties 文件中做如下配置, 使用示例: insert into table1(id

读书笔记-Mycat权威指南-08-Mycat中的Join

Join Join 绝对是关系型数据库中最常用一个特性,然而在分布式环境中,跨分片的 join 确是最复杂的,最难解决一 个问题. Join:inner ,left,right,full,cross 尽量避免使用 Left join 或 Right join,而用 Inner join. 在使用 Left join 或 Right join 时,ON 会优先执行,where 条件在最后执行,所以在使用过程中,条件尽 可能的在 ON 语句中判断,减少 where 的执行少用子查询,而用 join.

读书笔记-Mycat权威指南-03-Mycat中的概念

数据库中间件 Mycat 是一个开源的分布式数据库系统,但是由于真正的数据库需要存储引擎,而 Mycat 并没有 存储引擎,所以并不是完全意义的分布式数据库系统. Mycat 是数据库中间件,就是介于数据库与应用之间,进行数据处理与交互的中间服 务. 由于前面讲的对数据进行分片处理之后,从原有的一个库,被切分为多个分片数据库,所有的分片数据库集 群构成了整个完整的数据库存储. 数据被分到多个分片数据库后,应用如果需要读取数据,就要需要处理多个数据源的数据. 如果没有数据库中间件,那么应用将直接面

读书笔记-Mycat权威指南-10-分片规则

分片规则概述 在数据切分处理中,特别是水平切分中,中间件最终要的两个处理过程就是数据的切分.数据的聚合. 选择 合适的切分规则,至关重要,因为它决定了后续数据聚合的难易程度,甚至可以避免跨库的数据聚合处理. 前面讲了数据切分中重要的几条原则,其中有几条是数据冗余,表分组(Table Group), 这都是业务上规 避跨库 join 的很好的方式,但不是所有的业务场景都适合这样的规则,因此本章将讲述如何选择合适的切分规则. Mycat 全局表 如果你的业务中有些数据类似于数据字典,比如配置文件的配

css权威指南 读书笔记

网上看见推荐的书总是喜欢买回家,但是大多数时候都不会立即就看,都是在书橱里蒙上了一层灰尘.从毕业到现在,由于公司业务原因,写js多余css,所以就想系统地看看css,并且做一些练习,于是就开始看<css权威指南>,看到了第六章,初步感觉,对于工作一年的我来说,很简单,当然也有一些我不熟悉的知识点,于是整理了下来. 一.@import 1.放在style容器中,且在其他css规则之前 2.每个人@import指令的样式都会加载使用 二.选择器 1.:first-letter 用于选取指定选择器的

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称