利用CSS层叠(cascade)处理样式冲突

• 　　即使在不太复杂的样式表中，也可能会有两个或者更多个规则找到同一元素。CSS通过一个叫做层叠（cascade）的过程处理这种冲突。层叠给每个规则分配一个重要程度指数。作者定义的样式具有最高的重要性指数，其次是用户定义的样式。但是为了增强用户的控制能力，用户可以通过为任何规则增加一个!important来提高它的重要性指数，让它的优先级高于任何规则，甚至是比作者的!important还要高。

  　　因此，层叠重要性指数的次序依次为：

  　　标记为!important的用户样式

  　　标记为!important的作者样式

  　　作者样式

  　　用户样式

  　　浏览器/用户代理的默认样式

  　　为了计算规则的优先级，每种类型的选择符都有一个相应的数值，由于每个选择器都由若干选择符组成，所以选择器的优先指数由选择符对应的数值相加而成，数值越高，优先级越高。CSS中的选择符有四类：

  　　行内样式（Inline Style），如＜span style="color:red">...＜/span>

  　　ID选择符（ID selectors），如#myid

  　　类、属性选择符、伪类（Classes, attributes and pseudo-classes），如 .class {...}、[href$=dudo.org]、:hover

  　　元素（elements)、伪元素选择符(pseudo-elements)，如 p {...}、:first-line {...}

  　　怎么来测量呢？如前所述，它们每一类都有不同的数值表示，其中：

  　　行内样式为：1000

  　　ID选择符为：0100

  　　类选择符为：0010

  　　元素样式为：0001

  　　这里要指出的是，所有这些数值都不是10进制数字，1000只是代码它是一个行内样式，

  　　例如，body #wrap p {...}，那么它的优先级指数就是 1+100+1=102，而body div#wrap p {...}的优先级指数就是 1+ 1 +100 + 1 =103。

  　　再看一下其它的例子：

  　　* { } 0

  　　li:first-line { } 2 (one element, one pseudo-element)

  　　ul ol+li { } 3 (three elements)

  　　ul ol li.red { } 13 (one class, three elements)

  　　style=”” 1000 (one inline styling)

  　　div p { } 2 (two HTML selectors)

  　　div p.sith { } 12 (two HTML selectors and a class selector)

  　　body #darkside .sith p { } 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

  　　看这段代码：

  　　#wrap #content {color: blue;}

  　　#content {color: red;}

  　　＜div id="wrap">

  　　＜div id="content">this is a text here＜/div>

  　　＜/div>

  　　最终文本会显示什么样的颜色呢？

  　　是的，样式覆盖只会发生在具有相同优先级的情况下。这个例子中#wrap #content为200，而#content为100，纵使后设定color:red，也不会覆盖掉先前设定的color:blue;。此外，你可以为#content {color: red;}增加!important来看看效果。

• [1] [2] 下一页 
• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• 利用CSS层叠(cascade)处理样式冲突 相关文章：
• ·Cisco实战:配置三层交换的综合案例
• ·华为三层以太网交换机基本原理及转发流程
• ·三层交换机典型应用配置实例
• ·什么是三层交换机
• ·Excel LOOKUP函数解决IF函数嵌套层数的问题
• ·层（div）的上下滚动
• ·用层模拟下拉列表框
• ·交换机基础 详解第三层交换机技术
• ·PS可选颜色和图层混合模式调色实例
• ·如何隐藏网页中的层DIV
• 利用CSS层叠(cascade)处理样式冲突 相关软件
• ·五十层魔塔
• ·魔塔(暑假危机夏令营150层)
• ·是男人就下100层
• ·魔塔 (暑假危机夏令营150层)
• ·经典的地产广告设计欣赏一（PSD分层)
• ·是男人就上100层
• ·DW3图层应用技巧集锦
• ·高层的死角

上一篇:巧妙避开木马病毒攻击 保护QQ聊天信息

下一篇:用会声会影10软件打造照片“人景分离”特效(1)

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐