为您解读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优先级规则
既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名个数。
最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数(css2.1是用4位数表示)。( 注意,你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
例如:
每个ID选择符(#someid),加 0,1,0,0。
每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
每个元素或伪元素(:firstchild)等,加0,0,0,1。
其它选择符包括全局选择符*,加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的继承性。
猜你喜欢
- 1。注意用SQL分析器可以看select出来的东西select right(convert(varchar(30),getdate(),12
- [1]好好规划自己的路,不要跟着感觉走!根据个人的理想决策安排,绝大部分人并不指望成为什么院士或教授,而是希望活得滋
- 代码如下:USE TestDB declare @conversation uniqueidentifier while exists (s
- 代码如下:登陆时记录cookies页面代码 <!--#include file="md5.asp"--&
- 但是如果是让你接手一个二等残废的网站,并让你在上面改版,而且不能推翻式改版,只能逐步替换旧的程序,那么你会非常痛苦,例如我遇到的问题: 问题
- IE的for...in循环存在严重的缺陷,除了性能低下外,有许多属性不可遍历,著名有这三兄弟:constructor ,toString ,
- 我想大家在用Sql2005一般都是.NET2005自带的SQL Server 2005是SQL Server2005 Express版本的,
- 随着现在宽屏显示器的流行,Flash的全屏模式下,越来越需要考虑到普屏显示器与宽屏显示器的差别。Flash全屏模式有以下特点:窗口最大化,且
- 下面这些命令可以在命令行下用isql执行,isql -E -Q "命令",isql.exe
- 本文介绍了三种跨域访问的方法,php,asp及jsp种访问远程文件的方法。这几天脑细胞剩下的不多了,不过问题都一个个解决了。我希望搜索引擎能
- 1 The syntax of the SQL statement is verified.SQL的语法检查2 The data dicti
- 英文原文:http://www.usabilitypost.com/2009/04/15/8-characteristics-of-succ
- 类的定义 类定义有三种基本方法,1、创建并能返回特定类型的对象的函数(工厂函数),例如:function Co(){ var o = new
- 有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看
- 本章的前面讨论如何使用SQL向一个表中插入数据。但是,如果你需要向一个表中添加许多条记录,使用SQL语句输入数据是很不方便的。幸运的是,My
- HTTP应答头概述 Web服务器的HTTP
- 在学校修管理学的时候,有讲过一个管理激励的理论。管理激励是基于行为和认知科学的研究,来发现人们的需要、动机、目标和行为四者之间关系的核心理论
- 声明,本文中所称CSS雪碧即为CSS Sprites,这个词组一直没有一个固定或者约定俗成的中文翻译,一些人开始称之为CSS雪碧,我们且当作
- 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的
- 最近在做一个电信的MIS系统,由于数据库的数据量庞大(最少也有500万),发现了一个sql server 长时间占有内存的现象。当你查询数据