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

html-css015

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来说最基本的就是本章所讲的级联机制本身,如何解决冲突,如何实现继承,如何实现排序,都有一套底层的规则在作用。

CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。

首先,对浏览器来说,ID 选择器 #xx 是最快的,其次是 class 选择器、html 元素选择器等。

假如 DOM 的结构如上图,匹配规则是 .mod-nav h3 span。

若从左向右的匹配,过程是:从 .mod-nav 开始,遍历子节点 header 和子节点 div,然后各自向子节点遍历。在右侧 div 的分支中,最后遍历到叶子节点 a ,发现不符合规则,需要回溯到 ul 节点,再遍历下一个 li-a,假如有 1000 个 li,则这 1000 次的遍历与回溯会损失很多性能。

再看看从右至左的匹配:先找到所有的最右节点 span,对于每一个 span,向上寻找节点 h3,由 h3再向上寻找 class=mod-nav 的节点,最后找到根元素 html 则结束这个分支的遍历。

很明显,两种匹配规则的性能差别很大。之所以会差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点);而从左向右的匹配规则的性能都浪费在了失败的查找上面。

当然这是比较明显情况,如果在叶子上存在多个不符合条件的 span,从右向左的规则也会走一些弯路(这时就需要优化 CSS 选择器了)。但平均来说它还是更高效,因为大多时候,一个 DOM 树中,符合匹配条件的节点(如 .mod-nav h3 span)远少于不符合条件的节点。

希望我的回答可以帮到您哦

A. java软件开发工程师简历的技能怎么写

java软件开发工程师的技能:熟练运用struts 、hibernate、spring等框架技术、掌握JSP、Servlet、JQuery等Web开发技术、熟悉JBPM工作流技术及JasperReport、JFreeChart等报表技术、数据库方面使用过Oracle、Sqlserver等进行过开发、熟悉SQL数据库操作语言。

B. java工程师的专业技能包括哪些

core java,js,servlet,jsp,SSH三大框架,xml,SQL和数据库。Proxy、ThreadLocal、InvocationHandler后面的这三个是类。

嗯。Spring的IOC、AOP。

MVC

23种设计模式。主要是单利。抽象工厂。工厂方法。迭代。策略。装饰者。适配器。

ejb。了解JNDI。JPA。JTA。

嗯。也没什么了。还有就是前台的 HTML。JSP。JSF。JS。嗯。

Struts2 的 前端控制器。拦截器等等。

C. 急求Java程序员技能描述!!

精通Java语言,熟练掌握了j2ee、jsp、servlet、struts、 spring、hibernate技术,熟练数据库Oracle的数据库技术的管理与维护,熟练运用SQL语句,熟练运用struts、hibernate、spring轻量级三大框架技术进行项目开发。 熟悉java开发工具Eclipse使用。熟练Tomcat容器的配置及使用。熟练使用HTML/XML标记语言和JS脚本语言、熟练UML统一建模语言,能运用Sybase PowerDesigner进行模型建立。

还有尽量不要说精通 !!精通不符合实际,因为很对面试官自己都不敢谈精通!

D. Java程序员的三年工作经验,应该必备哪些专业技能

1、基本语法

这包括static、final、transient等关键字的作用,foreach循环的原理等等。

2、 ***

非常重要,基本上就是List、Map、Set,各种实现类的底层实现原理,实现类的优缺点。

*** 要掌握的是ArrayList、LinkedList、Hashtable、HashMap、ConcurrentHashMap、HashSet的实现原理,

(1)ConcurrentHashMap的锁分段技术

(2)ConcurrentHashMap的读是否要加锁,为什么

(3)ConcurrentHashMap的迭代器是强一致性的迭代器还是弱一致性的迭代器

3、设计模式

设计模式在工作中是非常重要、非常有用的,23种设计模式中重点研究常用的十来种就可以了,面试中关于设计模式的问答主要是三个方向:

(1)你的项目中用到了哪些设计模式,如何使用

(2)知道常用设计模式的优缺点

(3)能画出常用设计模式的UML图

4、多线程

假如有Thread1、Thread2、Thread3、Thread4四条线程分别统计C、D、E、F四个盘的大小,所有线程都统计完毕交给Thread5线程去做汇总,应当如何实现?

聪明的网友们对这个问题是否有答案呢?不难,java.util.concurrent下就有现成的类可以使用。

另外,线程池在面试中也是比较常问的一块,常用的线程池有几种?这几种线程池之间有什么区别和联系?线程池的实现原理是怎么样的?实际一些的,会给你一些具体的场景,让你回答这种场景该使用什么样的线程池比较合适。

最后,虽然面试问得不多,但是多线程同步、锁这块也是重点。synchronized和ReentrantLock的区别、synchronized锁普通方法和锁静态方法、死锁的原理及排查方法等等,关于多线程,

5、JDK源码

要想拿高工资,JDK源码不可不读。总结一下比较重要的源码:

(1)List、Map、Set实现类的源代码

(2)ReentrantLock、AQS的源代码

(3)AtomicInteger的实现原理,主要能说清楚CAS机制并且AtomicInteger是如何利用CAS机制实现的

(4)线程池的实现原理

(5)Object类中的方法以及每个方法的作用

6、框架

老生常谈,面试必问的东西。一般来说会问你一下你们项目中使用的框架,然后给你一些场景问你用框架怎么做,比如我想要在Spring初始化bean的时候做一些事情该怎么做、想要在bean销毁的时候做一些事情该怎么做、MyBatis中$和#的区别等等,这些都比较实际了,平时积累得好、有多学习框架的使用细节自然都不成问题。

7、数据库

一些基本的像union和union all的区别、left

join、几种索引及其区别就不谈了,比较重要的就是数据库性能的优化,如果对于数据库的性能优化一窍不通,那么有时间,还是建议你在面试前花一两天专门把SQL基础和SQL优化的内容准备一下。

8、数据结构和算法分析

数据结构和算法分析,对于一名程序员来说,会比不会好而且在工作中绝对能派上用场。数组、链表是基础,栈和队列深入一些但也不难,树挺重要的,比较重要的树AVL树、红黑树,可以不了解它们的具体实现,但是要知道什么是二叉查找树、什么是平衡树,AVL树和红黑树的区别。

9、Java虚拟机

Java虚拟机中比较重要的内容:

(1)Java虚拟机的内存布局

(2)GC算法及几种垃圾收集器

(3)类加载机制,也就是双亲委派模型

(4)Java内存模型

(5)happens-before规则

(6)volatile关键字使用规则

E. 智联招聘java专业技能怎么写

你可以参考该招聘网站上发布招聘信息的公司的任职要求,根据其要求进行写作

F. 计算机专业的求职简历中专业技能描述怎么写啊

Java:

1. 全面掌握Java语言及面向对象的设计思想。

2. 熟悉JSP,Servlet,JavaBean等J2EE的核心技术。

3. 熟练使用Struts1.x、Hibernate 3.x以及Spring 3.x框架。

4. 熟悉Struts 2.x和EJB 3.0框架。

5. 熟练使用Ajax,利用DWR框架设计Ajax的MVC框架以及自定义Ajax框架。

6. 能熟练的应用各种常见的设计模式:工厂模式,单例模式,缺省适配器模式,不变模式等。

7. 熟练掌握Web Service技术

8. 熟练使用JSP,HTML,JSTL,EL等表现层技术。

9. 熟练应用JavaScript ,CSS, Dreamweaver。

_________________________________________

数据库:

1. 熟悉T-SQL语言,能够熟练的使用SQL语句创建表,约束,视图,存储过程。

2. 熟练运用SQLServer,MySQL等数据库系统以及基于(尤其是SQLServer)进行的应用程序开发。

_________________________________________

其 他:

1. 熟悉C#面向对象语言,熟悉.NetFrameWork 3.0等核心框架。

2. 熟悉ASP.Net技术并能够熟练地使用Visual Studio2008独立进行Web开发。

3. 熟悉ADO.Net等基于Inter的数据库访问技术。

这个可以作为参考!

G. java软件工程师技能专长怎么写

可以写你学会哪些技术,比如SSH三大框架,以及对技能的掌握程度。