CSS教程：认识层叠规则互相作用
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-04
| ; <p styel=”……”> 特殊性 = 1, 0, 0, 0 特殊性高的规则会取代特殊性低的规则，无论其书写的先后顺序如何，例如： h1 {color red;} 0,0,0,1 body h1 {color green;} 0,0,0,2 （胜出） 或者： h2.grape {color purple;} 0,0,1,1 (胜出) h2 {color silver;} 0,0,0,1 4.6.3 继承和特殊性 在特殊性的框架下，继承的特殊性为“0”。也就是说，任何显式的规则声明都会覆盖掉继承的样式，例如有如下代码： em { color: blue; } p.list { color: gray; } <p class="list">继承的特殊性为<em>“0”</em>。</p> 虽然“p.list”的特殊性为“0, 0, 1, 1”，但是，对“em”的color声明还是会覆盖掉从“p.list”继承的color样式，因此在浏览器内显示如图4-32所示。 
图4-32 继承与特殊型 因此，如果需要让p内的em能呈现和p一样的颜色，则需要如下定义： p.list, p.list em { color gray; } 4.6.4 重要性 虽然层叠和特殊性决定了CSS规则的最后应用效果，但是，也可以通过声明某个规则的“重要性”来提高此规则的权重，例如图4-33所示。 
图4-33 重要性的表现 虽然ID选择器的特殊性高于类型选择器，但是由于类型选择器（div）属性值后面添加了“!important”重要性声明，因此“color : red”这条声明的特殊性最高。 “!important”重要性声明的权重甚至高于内联式样式，例如有如下代码，其在浏览器内显示如图4-34所示。 div { color: red !important; } <div style="color: blue;">设定了style的div</div> 
图4-34 重要性的权重高于内嵌式样式 在CSS 1中，制作者的“!important”规则超越用户的“!important”规则。 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: 介绍我知道的hack方法下一篇: CSS网页布局强制换行和强制不换行的属性讲解
关于CSS教程：认识层叠规则互相作用的所有评论
