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

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

文章来源:365jz.com     点击数:173    更新时间:2008-04-30 07:34   参与评论
 三、继承中容易引起的错误

  有时候继承也会带来些错误,比如说下面这条CSS定义:

  Body{color:blue}

  在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将CSS定义成这样:

  Body,table,th,td{color:blue}

  这样表格内的文字也会变成蓝色。

  四、多种样式混合应用

  既然有了继承性,那么在样式表中的应用上可能会有些读者搞不清,多个样式表同时应用到一个对象上会发生什么情形呢?先举个简单的例子:

  样式定义:.apple{color:red;}  H1{color:yellow;}

  应用举例代码:<H1 CLASS=”apple”>这儿的苹果好红啊</H1>

  应用举例效果:因为选择符H1和.apple都匹配上面的H1元素,那么到底浏览器会应用哪一个呢?通过在浏览器中观察,我们发现这段文字应用了.apple这个样式,所以它显示的是红色。这是因为两条规则的特殊性不一样,CSS规则必须这样进行处理。

  

  样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

  统计选择符中的ID属性个数。
  统计选择符中的CLASS属性个数。
  统计选择符中的HTML标记名格式。

  最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

  以下是一个按特性分类的选择符的列表:

  H1 {color:blue;}                        特性值为:1
  P EM {color:purple;}                    特性值为:2
  .apple {red;}                           特性值为:10 
  P.bright {color:yellow;}                  特性值为:11
  P.bright EM.dark {color:brown;}           特性值为:22
  #id316 {color:yellow}                   特性值为:100

  从上表我们可以看出#id316具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。

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

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

快速入口

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

其它栏目

· 建站教程
· 365学习

业务咨询

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

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

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