您现在的位置: 365建站网 > 365文章 > 深入了解CSS的继承性及其应用

深入了解CSS的继承性及其应用

文章来源:365jz.com     点击数:197    更新时间:2008-04-30 07:34   参与评论
五、CSS继承的优先级问题

  上面我们讨论了CSS的继承性和特殊性,在特殊性的框架下,被继承的特性值为0,这就意味着任何显示声明的规则将会覆盖其继承样式。因此,不管一条规则具有多高的权重,如果没有其他规则能应用于这个继承元素,那么它也只是个被继承的规则而已,举例说明。

  样式定义:
  
BODY {background:black;}
  LI {color:gray;}
  UL.white {color:white}

  应用举例代码:
<ul>
  <li>举例列表一</li>
  <li>举例列表二</li>
  <li>举例列表三</li>
  <li>举例列表四</li>
</ul>

  应用举例效果:

  

  有些读者可能认为除包含.white类的列表项显示为白色外,其余所有的列表项都应该是灰色的。然而情况并非如此。

  为什么会出现这样的情况呢?因为带选择符LI的显式声明的权值比从UL.white规则那里继承过来的权值要大,所以每个列表项都是灰色的。

  可能有些地方不是很好理解,大家多思考一下就会明白,平时在应用样式表的时候多留意思考一下。

  下面我们再来看一个例子,若给定如下所示的标记,则EM强调文字将会是灰色的,而非黑色,因为EM规则的权值要大于从H1元素继承来的权值:

  样式定义:
  H1#id316 {color:black;}                  特性值为:101
  EM {color:gray;}                        特性值为:1

  应用举例代码:
  <H1 ID=”id316”>深入探讨<EM>CSS的继承性</EM></H1>

  应用举例效果

  

  这是因为第二条EM规则的特性值(1)要比被继承的特性值(0)要大,事实上规定H1#id316的原始特性值(101)对其继承值没有影响,仍旧为0。

  小技巧:

  如果想让H1始终为黑色,而EM文字在其他情况下红色,那么下面的样式表设置就是一个很好的方法:

  H1,H1 EM {color:black;}                 特性值为:1,2
  EM {color:red;}                          特性值为:1

  给定这个规则后,除在H1元素内的任何EM文字就都是红色,而H1内的EM文字仍旧为黑色,由于其选择符分组,在第一条规则中就有两条有效的规则(一条是对H1的,另一条是对H1 EM的)也就有两个特性值——每条规则一个。

  上面我们讨论了多个样式规则同时应用于同一对象时,哪个规则会被最终应用的一些情况,可能有些细心的读者会说,那STYLE元素呢?对啊,HTML代码中可以直接应用内联样式STYLE的嘛。那么它的特性值如何呢?

  回答是这样的:带有STYLE的元素在CSS1下其特性值为100,尽管类似于#ID316这样的ID选择符的特性值也为100,但在实际应用中,STYLE这一权值会更高一些,因为STYLE元素的值看起来要比多数普通规则的权值大。所以我们可以看出内联样式具有高的特性值,具体的例子我们就不举了,大家可以自己试试。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (197人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号