css样式冲突处理机制.docVIP

css样式冲突处理机制 css自身的设置使得可以同时有多个属性应用到同一个元素上，而这些属性之间可能会互相冲突。例如，你在一个页面里使用样式p{color:red}来设置p元素的字体为红色，随后又使用了div#myid,p.message{color:blue}这样的代码，那浏览器怎么知道到底要显示什么颜色？这就得靠cascade了。 名词解释 样式属性：也就是我们平时在css指示符(selector)里定义的声明代码，如p{color:red}，则color就是样式属性，color是它的值。 cascade将结合重要性、特异度以及出现的顺序来决定每一种样式属性的权重，这个权重将会用来决定浏览器将会采用哪一种样式属性，权重高的则优先使用。 ? 权重是怎么计算的？ ? css?cascade将通过以下四步来计算每一个样式属性的权重： 1.对于一个给定的样式属性，例如color，先找出应用到某一个指定元素的所有css指示符(selector)； 2.根据声明的重要性和起源对选择符进行排位； 3.根据特异度(specificity)来对拥有同样的重要性选择符进行排拉； 4.最后，如果重要性、起源和特异度都一样的话，将根据样式属性出现的顺序来排拉，后来者居上，最后一个出现的获胜。 下面逐一说明每一步的实际操作和触发条件。 ? 第一步，遍历所有选择符 ? 用户代理(通常就是指浏览器)将会找出拥有同一样式属性应用到某一指定元素的所有有效css指示符。为了做到这一点，它将根据指定的media type遍历所有的样式表来源，选择符的来源有三种：用户代理/浏览器样式，作者样式和用户样式。 用户代理/浏览器样式 也就是浏览器自身设置用来显示网站的样式，不同的浏览器可能有不同的样式表，例如IE和Firefox的就不一样，所以大家分别使用这两种浏览器访问同一个网站的时候，看到实际效果可能就不同。 用户样式 浏览器还允许用户设置网页的样式，例如，我们用IE浏览网站的时候，都可以通过浏览器查看菜单下的样式或者文字大小子菜单来设置网页实际的显示效果。 作者样式 网页创建者建立的样式表，一般会css文件出现或者是在页面头部里定义的style，也就是网站源代码的一部分。例如，大家看百度和谷歌的页面就不一样，这就是作者样式不一样的结果。 当浏览器遍历以上三种样式后，如果发现同时有多个属性应用到同一个元素上，导致css冲突的话，那么将进入第二步。 ? 第二步，比较样式属性的重要性 ? 通常情况下，作者样式具有最高的重要性，其次是用户样式，最后才是用户代理/浏览器样式，但是如果出现了!important标记的话，那么规则会有所改变，通过!important可以提高某种样式的重要性，让它的优先级高于其他没有加该声明的所有样式。下面是样式属性的重要性顺序（由高至低） 标记为!important的用户样式 标记为!important的作者样式 作者样式 用户样式 浏览器/用户代理的默认样式 当两个样式属性拥有相同的重要性的时候，那么将进入第三步。 ? 第三步，比较样式属性的特异度(specificity) ? 特异度的计算是通过计算a,b,c,d四列值来进行纵向比较得出的，详细的方法请参考《如何计算css选择符(selector)的特异度(specificity)》和《如何通过specificity确定css优先级》两篇文章。 当两个样式属性拥有相同的特异度的时候，那么将进行第四步。 ? 第四步，判断样式属性出现的先后顺序 ? 这一步是最简单的了，最后出现的将拥有最高的优先级，也就是后来者居上。举个简单的例子，对于以下的css代码，最后的颜色是blue，因为它是后出现的。p{color:red;} p{color:blue;} 在文档中引入外部css文件，一般可以使用link或者@import的方式，对于这两种方式，如果都是使用link或者都是使用@import方式进行引入的话，则遵循后来都居上的规则，但如果同时存在两种引入方式的话，则@import拥有更高的优先级，不管它是否出现在link引入之后。 而对于在页面表头用style定义的和引入的这两种方式，人们一般都会错误地认为style里的样式优先级会高于引入的样式，但其实不然，这两种方式同样遵循后来者居上的规则，也就是说，如果外部引入在style的后面，则外部引入的优先级高，反之亦然。 以上就是css属性如何应用于一个元素的整个过程，或者你会奇怪，如果没有任何一种css属性应用于元素的话，那么将会发生什么情况？例如，假设html页面存在有p元素，但这个页面的所有css都没有设置该元素的颜色，那么它将会是什么颜色？这就得用上样式继承，也就是说，p元素的颜色将会继承它的父结点的，例如：div style=”color:re