为您解读CSS优先级

作者:dh20156 来源:css探索之旅-飘零雾雨的庄园 时间:2009-06-18 18:29:00 

在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。

首先,我们对CSS作一个简单的说明:CSS是层叠样式表(Cascading Style Sheets)的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,应该很少没有听说过CSS了,因为在制作网页过 程中我们经常需要用到。

其次:我们能通过CSS为文档设置丰富且易于修改的外观,以减轻网页制作者的工作负担,从而减轻制作及后期维护的代价。

其实现在还来讲CSS是什么,CSS有什么作用完全是多余的,相信从事网页制作的朋友都已经或多或少的接触过了。

言归正传,我们开始进入今天的话题:

一、什么是CSS优先级?

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

二、CSS优先级规则

既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。

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

  1. 统计选择符中的ID属性个数。

  2. 统计选择符中的CLASS属性个数。

  3. 统计选择符中的HTML标记名个数。

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

例如:

  1. 每个ID选择符(#someid),加 0,1,0,0。

  2. 每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。

  3. 每个元素或伪元素(:firstchild)等,加0,0,0,1。

  4. 其它选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。

三、特性分类的选择符列表

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

选择符

特性值

h1 {color:blue;}

1

p em {color:purple;}

2

.apple {color:red;}

10

p.bright {color:yellow;}

11

p.bright em.dark {color:brown;}

22

#id316 {color:yellow}

100

单从上面这个表来看,貌似不大好理解,下面再给出一张表:

选择符

特性值

h1 {color:blue;}1
p em {color:purple;}1+1=2
.apple {color:red;}10
p.bright {color:yellow;}1+10=11
p.bright em.dark {color:brown;}1+10+1+10=22
#id316 {color:yellow}100

通过上面,就可以很简单的看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100,继承的权重为0(后面会讲到)。

按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

优先级问题其实就是一个冲突解决的问题,当同一个元素(内容)被CSS选择符选中时,就要按照优先级取舍不同的CSS规则,这其中涉及到的问题其实很多。

说到这里,我们不得不说一下CSS的继承性。

标签:css,优先级,继承
0
投稿

猜你喜欢

  • MySQL数据库对dvbbs.php全文搜索的完全分析

    2010-06-11 13:25:00
  • 关于字体的一些思考

    2008-03-03 12:53:00
  • js实时获得服务器上时间

    2008-11-25 13:55:00
  • 用javascript实现Base64编码

    2008-03-04 16:51:00
  • FrontPage XP设计教程1——站点初建与管理

    2008-10-11 12:13:00
  • 典型的三行二列居中高度自适应css布局

    2008-02-22 16:02:00
  • ORACLE常见错误代码的分析与解决(三)

    2010-07-31 12:45:00
  • ASP基础教程之学习ASP中子程序的应用

    2008-10-16 10:53:00
  • 浅析MySQL数据库授权原则

    2009-12-15 09:21:00
  • MySQL数据库只监听某个特定地址的方法

    2008-12-05 16:11:00
  • 索引的原理及索引建立的注意事项

    2012-08-21 10:27:47
  • Javascript操作表单之间的数据传递

    2007-10-25 12:58:00
  • 黑客谈 MSSQL SA权限入侵的感悟

    2008-03-20 10:18:00
  • javascript彩虹圈效果

    2011-08-05 19:10:45
  • 浮动元素对浏览器的支持

    2008-02-02 10:05:00
  • WIN2003无法上传较大的文件Request对象错误解决方法

    2007-08-10 09:44:00
  • 数据库性能优化之冗余字段的作用

    2011-03-03 19:21:00
  • SQL Join的一些总结(实例)

    2012-08-21 10:19:29
  • SQL Server数据库导入MySQL数据库体验

    2009-01-20 16:07:00
  • SQL指令植入式攻击的危害及其防范措施

    2008-12-19 14:07:00
  • asp之家 网络编程 m.aspxhome.com