Css权威指南(4th,第四版中文翻译)-3.特异性和层级继承

html-css011

Css权威指南(4th,第四版中文翻译)-3.特异性和层级继承,第1张

第2章里面我们了解了document的结构和CSS选择器是如何查找定位对应的元素的。每一个合理的document都会生成一个结构树,基于此,选择器基于元素的祖先,属性,兄弟节点和更多的因素来定位元素。而且这一dom结构树也是CSS种实现继承的基础。

继承是(Inheritance)CSS属性如何从一个元素传递到它的所有子元素的过程。浏览器在决定给一个元素配置什么样式的时候,除了要考虑继承关系,同时也要考虑元素的特异性(Specificity,这个翻译需要斟酌下,但是意思很明显,存在于多个冲突样式中的优先级机制)。而考虑的这一过程就称为级联(cascade)。接下来我们就来探讨一下这三种机制-特异性,继承和级联。后两者的区别其实可以简单归纳为:h1{color:redcolor: blue}的结果就是级联,而在h1中创建一个span就是继承。

综上,别管这几个有多抽象,继续学习,会看到回报的。

从第二章我们看到选组元素的方式太多了,所有很有可能同一个元素被很多规则选中,来看看下面的例子:

上面的3对样式中每对都是作用在同一个元素上,那么到底浏览器该在元素上应用哪一个样式呢?结果就在每个选择规则的特异性中。浏览器逐条评估每条选择器规则的特异性,然后将样式声明应用到元素上。当同一个元素中包含多个存在冲突的属性声明时,有最高特异性的属性就会胜出,把其他冲突规则替换掉。

一个选择器的特异性有选择器的组成决定,而一个特异性的值可以分成4部分,就像这样:0,0,0,0。而真实的特异性是由下面这些决定的:

还是举例来说明吧,分别来看看不同的选择规则对应的特异性值:

既然刚学了如果计算特异性值,赶紧用在之前的例子上吧:

虽然我们一般在写CSS的时候会把多个属性都写在一起,例如:

然而实际上浏览器为了更好的计算特异性值实际会把聚合的属性进行单独的拆分:

咱们再来考虑一个稍微复杂的例子:

基于这个结构最终显示的效果是这样的:

从这个例子中,我们可以很好的看到浏览器按照之前说的特异性的规则展示对应不同值得样式结果。可以看到,浏览器要对每个元素进行拆分,然后计算特异性值后再确定对这个元素渲染那些样式,想想整个流程就很繁杂,幸好浏览器都自动帮我们做好了,而且这是我们后面讲到的级联的很重要的一环。同样,详细了解浏览器的渲染流程也对我们优美的书写CSS样式有很大助益。

通用选对特异性值是没有贡献的,但它是有值的,虽然值是0,0,0,0,但这和没有特异性值是有区别的,后面会在继承章节中详细讨论。所以下面的结果是显而易见的:

除了div的后代p显示为黑色外,其他都显示为灰色。而通用选择器是不贡献特异性值得,因此下面两个表达式的值也是一样的:

之前有提过直接的ID选择器和通过属性选择器设置ID值,他们最终计算的特异性值是不同的。我们先回到之前的一个例子:

因为直接用ID选择器贡献的特异性值为0,1,0,0,而属性贡献的值为0,0,1,0, 所以下面的结果也是显而易见的:

到现在肯定很多读者会想,之前计算的特异性值的4位里面第一位是什么时候设置的?答案就是为内联样式设计的,比其他的所有声明优先级都高。来看看下面的例子:

结果很明显h1就是绿的,因为内联样式的值更高,或者说优先级更高。

有时候特异性值更高的样式还并不是你想要的,这时候可使用!important来表示那些特别重要的样式,不过格式有严格的规定,就是必须在分号前面加,例如:

!important表达式必须正确,不然的话会报错。那如果存在对同一个样式有多个important声明会怎样呢?那么这些样式都不会被应用,所以需要保证important的唯一性。

其实浏览器是这么处理important样式和非important样式的:将它们单独分成两拨,important的一拨优先级更高,并且在这个组内处理自身的冲突啥的;同样的逻辑对应于非important组,组内采用特异性值来解决冲突。来看个例子:

继承,顾名思义就是属性在祖先-后代节点间的传递机制。比如说一个在h1标签中设定的颜色,那么h1中的所有后代文本都会继承。

上例中em就是继承了h1中的gray颜色。来看个ul标签的例子:

可以看到ul的所有li元素也都继承了这一特性。继承看似简单不过也需要注意几点:

有没有很意外em中的元素为啥还是灰的,照理说应该都是黑色才对,就是因为继承来的黑色属性没有特异性值,而被全局的样式给替换了。

有时候没有特异性值也会带来麻烦,比如看:

如果id=toolbar的元素下面有链接,那么就很有可能因为没有定义而采用浏览器的默认样式,一般来说是这样:

解决方案归根结底还是要有特异性值,可以有多种方法都是可以的:

再来考虑下个问题,如果两个具有完全相同特异性值的元素作用在同一个节点上,那该怎么办?比如说像这样:

还记得css为啥叫css么?Cascading Style Sheet,级联样式表,通过定义相关的规则来结合继承和特异性值。来看看都有哪些吧。

为了更好理解,我们对后四个规则进行详细说明:

虽然p本身有内联的样式,但因为标记了!important,所以还是显示为灰色。另外即使给内联样式加上了important也没啥用:

在上面权重相同的情况下对比源头,作者的优先级高于读者的。但如果在important情况下,读者的优先级要高于作者的,总结一下顺序就是:

如果上面的类型相同,则会进入到这一步,判断特异性值。

如果特异性值也一致,最后判断下出现的顺序,后出来的覆盖先前的。

结果就是blue颜色。而这一顺序对import进来的样式也是一样的。

而就是因为这个原因才会有链接推荐样式的顺序方案,一般称为LVFHA,就像下面这样:

这个顺序还可以有另一种玩法,实现的效果是只有未访问的链接才会有hover样式,而且所有链接都会有active样式,就像下面这样:

不过最好的办法就是使用串联的伪类来彻底消除这种情况,为不同的状态设定不同的样式:

不过如果引入了active类的话还是会触发冲突:

如果我们把最后两个active状态移到hover前面,那么它们就会被忽略,当然也是有办法解决的,就是引入更多的伪类:

可能对CSS来说最基本的就是本章所讲的级联机制本身,如何解决冲突,如何实现继承,如何实现排序,都有一套底层的规则在作用。

了解更多的前段知识请看下面我精心为您整理的前端必看的书籍,希望您喜欢!

十本学习前端必看书籍

第一本,入门

《Head first HTML&CSS》

最好的入门书。看两遍就对HTML &CSS 有个大概印象了。

此时把w3cschool作为备查手册收藏起来

第二本《CSS权威指南(第三版)》

最权威的CSS书籍,除了阅读W3C的文档外的不二选择(就是翻译有点操蛋,遇到感到难理解的地方可能还是要求助于网络资源)。有时间(无论是现在还是将来)可以反复看,并当做字典随时查。

第三本《精通CSS》

广受前辈推荐的一本书。上一本书是字典的话,这本书相当于《中学生作文大全》,汇集了一些CSS的最佳实践。

第四本《图解CSS3:核心技术与案例实践》

这本书比较新,讲解的是最新的CSS3(前三本书停留在CSS2.1时代),CSS3也是必学的,不是什么可学可不学的最新技术。

HTML CSS值得看的书就这些(之后会有一本《CSS秘密花园》,尚在翻译中,也很值得期待),剩下的就是自己写还有看技术博客了。接下来是JavaScript,HTML和CSS都是没有逻辑的标记型语言,JS才是真正的编程语言,评价前端工程师的水平就看这个了。

第五本《JavaScript DOM编程艺术》

最好的JS入门书籍,一目了然地告诉你如何用JS操作DOM(这是浏览器端编程的基本功),还灌输了最符合标准的编程理念。可惜有点老,最新一版是2010年的,以至于部分内容有点过期,例如本书内经常提到“某某方法浏览器不一定支持,需要小心使用”,而这些历史遗留问题当今已经不存在了,阅读过程中无视就好。

第六本《JavaScript高级程序设计》

每个前端必看的书,此书是前端工程师科技树的关键一环。看完此书后再看看之后各类进阶书籍会比较好。

俗称红宝书,也算入门书籍,虽然是大部头(七百多页),但至少通读一遍。

全部掌握了,你可以在网络社区里谈笑风生了,经过实践的锻炼后,面试个前端工程师的岗位应该都没问题了。

第七本《JavaScript语言精粹》

也是前端必看。薄薄一百来页,对JS的去粗取精。

第八本《你不知道的JavaScript》

这是一套丛书, 目前为止仅翻译了第一卷。每本都挺薄,深入介绍了JS中的重要概念。

第九本《JavaScript设计模式》

“设计模式”是软件工程的重要课题,相当于高考时候的答题套路。前人总结出来的应对各种问题的模板。也算是必看书籍。关于JavaScript设计模式的书籍目前也有好几本,也有国人写的,挑一两本看看就好。

第十本《高性能网站建设指南》(及其续篇《高性能网站进阶》)

告诉你真正的商业公司的前端是怎么优化一个网站的。当然优化的问题不是看看书就能解决的,最好时刻了解你的同行们的经验。

第一阶段:HTML和CSS的学习

HTML就不多说了,基础中的基础,这个都不会的小伙伴请参见HTML手册,认真学习W3C课程,稍有基础之后可以跟着视频学习《HTML+CSS基础课程》。

   前端开发必看的14本书

1、《CSS权威指南》第三版

这本书实在太适合小白用户了,是一本为初学者清扫障碍的书籍。同行一致认为这本书是学习CSS基础的首选。CSS界权威Meyer大师的作品,翻译水平也灰常赞!

2、《CSS那些事儿》

不用于一般技术类书籍的枯燥乏味,这本书很有意思。作者是蓝色理想经典论坛标准版荣誉版主林小志,具有多年网站设计和网站重构经验,在CSS、XHTML等前台技术方面有着深厚功底。

全书以传达CSS布局思维为中心,通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用,使读者能深入了解到如何在页面中更好地运用CSS布局。阅读本书之后将会发现,原来CSS样式居然是这么好玩的东西。

3、《精通CSS:高级Web标准解决方案》第二版

前段学习必备书籍,作者Andy Budd是国际顶尖的网页设计师,著名的Web标准倡导者,网页咨询公司Clearleft的创始人之一。

本书将最有用的CSS技术汇总在一起,总结了CSS设计中的最佳实践,讨论了解决各种实际问题的技术,重点讲解了一系列的css开发技巧,是前端开发人员必备的手册。

4、《CSS禅意花园》

这是一本令人惊叹的书!必须用一个字形容的话,那就是:美!内容编排合理,文字生动有趣引人入胜,通过一个个实例引导读者阅读,强烈推荐!

作者是世界著名的网站设计师,书中的范例来自网站设计领域最著名的网站——CSS Zen Garden(CSS禅意花园)。童鞋们自己去领略吧。

第二阶段——JavaScript的学习

Javascript的书籍当然还是要看老外的,你懂得~

5、《JavaScriptDOM编程艺术》

此书绝对是入门好书,简洁优美的文笔简直是工具书中的典范啊有木有!

这本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则,然后将这些概念贯穿在书中的所有代码示例中,使你看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本,最后结合所讲述的内容创建了一个实际的网站。

6、《JavaScript权威指南》第6版

这本书非常适合初级、中级程序员,是学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册。

第6版涵盖HTML 5和ECMAScript 5。很多章节完全重写,紧跟当今最佳Web开发实践。本书新增章节描述了jQuery和服务器端JavaScript。

7、《JavaScript高级程序设计》第三版

《javascript权威指南》比较像一本字典,而这本《javascript高级程序设计》可以算是一本由浅入深的好读物。这两本书看完后,对javascript一定会有较为深入的了解。

作者Nicholas C. Zakas是世界顶级Web技术专家,现为雅虎公司界面呈现架构师,负责My Yahoo!和雅虎首页等大访问量站点的设计。这本书,看一遍不能算看过,至少读两三遍,每一遍都会让你有新的收获。

8、《高性能JavaScript》

本书从性能角度全面分析js,含金量非常大,很多知识都是作者通过实践总结出来的,都是经验的积累,强烈推荐!

同是Nicholas C. Zakas所写,如果看《JS高级程序设计》觉得理解不太透彻,学习较为吃力,那么我强烈建议你看看这本书,真的是极好的一本实践类书籍,言简意赅,灰常实用!

9、《JavaScript王者归来》

这本《JavaScript王者归来》不仅是一本传播知识的书,更是一本求道的书。O(∩_∩)O 有追求的程序员一定不要错过!愿神力与你同在!

它揭开了JavaScript的面纱,绕过误解和虚幻的表象,引领你探索程序王国的奥妙。这是一本探寻程序设计思想本源的“魔法典籍”,也是一本Web开发工程师们需要的案头参考书。

10、《JavaScript模式》

它绝对不是一本入门级别的书,适用于希望将自身的Javascript技巧提高到一个新层次的专业的开发人员和程序员。

《JavaScript模式》包含了实现每个讨论的模式的实践建议,并附有数个可以立即上手的范例同时还可以学到一些反模式。短小精悍,进阶必读!

11、《JavaScript设计模式》

进阶教程,得有一定功底才能看懂。反之,如果你轻而易举就能拿下此书,说明你已非等闲之辈~

本书共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识,第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用,主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。

第三阶段——jQUery的学习

12、《锋利的jQuery》第二版

入门首选,简单易懂,非常实在。《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍,对jQuery分析的逻辑非常值得学习。

第四阶段—学无止境!

如果以上书籍你全都搞定了,那么,恭喜你,你真的很厉害!到这种程度,相信你也不太需要别人推荐书籍了,不过我还是厚着脸皮推荐两本吧。

13、《高性能网站建设指南》

前端开发可以优化网站剩余70%~80%性能,这本书不算厚,几个小时就能看完,推荐前端开发工程师看看。在《高性能网站建设指南》中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持。

14、《Web开发敏捷之道》第二版

Web开发敏捷之道》曾荣获Jolt大奖“最佳技术图书”奖。在第1版的内容架构基础上,第2版增加了对Rails 1.2中新特性和最佳实践的介绍。此书覆盖了rails1.2的方方面面,其本身也很"敏捷",翻译也非常好。

CSS ZEN GARDEN (CSS禅意花园) 这个是我重点推荐的一本,很优美的CSS设计书,不但适合初级读者,也适合有一定基础的读者。

剩下的比较不错的还有:

CSS权威指南(第3版)

精通CSS:高级Web标准解决方案(第2版)

精彩绝伦的CSS

CSS设计彻底研究