相同元素不同结构重复定义的问题

《相同元素不同结构重复定义的问题》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、相同元素不同结构重复定义的问题>>edu.5151doc.教育资源库CSS选择器是构建CSS的基础.在为大型,复杂嵌套的(x)HTML文档进行样式定义时,很有可能会遇上针对相同元素在不同结构下的重复定义的问题,这个问题也是前端开发人员相对头痛的问题.在这种情况(针对相同元素在不同结构下的重复定义)发生的前提下,浏览器在渲染页面文件时,会按照一定规则进行优先级排列,然后根据这个优先级权重对发生状况的元素进行处理.而这个浏览器遵循的规则是什么呢?让我们来看一段简单的HTML代码:<bodyid="content"

2、><divclass="box"><pclass="italic">ForTesting2</p><emid="em"class="></div></body>这是段相当简单的HTML代码,但是具有相当的代表性.我们慢慢就能发现它为什么具有代表性了.首先我们来加上一点简单的CSS声明:p{/*1*/color:pink;}p.italic{/*11*/color:red;}div.boxp{/*12*/color:black;}divp{/*2*/color:blue;}#con

3、tentdivp{/*102*/color:orange;}divp.italic{/*12*/color:green;}bodydivp{/*3*/color:olive;}bodydivp.italic{/*13*/color:gray;}大家来猜猜看结果中的"ForTesting2"是什么颜色的呢?嗯...不浪费大家眼神了,结果是orange的,奇怪吗?有疑问吗?大家有没有注意到我在CSS中加入的,那我们应该怎么判断呢?首先,我们看这条声明最终定义的是哪个元素.前3条都是定义<p>...</p>这

4、个元素的,不难从中总结出一条规律:在声明中声明了元素的HTML标签的,权重又可以增加0.5,那么根据上面的例子,权重值就会变成:p.italic{/*11.5*/color:black;}div.italic{/*11*/color:red;}.boxp{/*11.5*/color:green;}可以发现第1条和第3条的权重值还是一样的,我们试着交换一下他们的位置,天哪,它们之间是可以相互覆盖的.对,那就证明它们是真正的同层(level)声明.那同样的后4条声明也可以这样分析了:.boxem#em{/*111.5*

5、/color:blue}body#content.{/*111*/color:green}#content.boxem{/*111.5*/color:gray}在这里的第1条和第4条权重值相同,第2条和第3条权重值相同.经交换实验也能发现这个数值的正确性.之前的权重计算公式曾经出现在Eric的书中以及W3的CSS3规范草稿中[.w3.org/TR/css3-selectors/#specificity].上一页12[这篇文章来自..，]