为您解读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的继承性。
0
投稿猜你喜欢
一、安装首先根据自己的python版本下载pyqt4离线包，现在连接：https://www.lfd.uci.edu/~gohlke/pyt- 1. lr_scheduler相关lr_scheduler = WarmupLinearSchedule(optimizer, warmup
- 在我上一篇文章，我搭了一个框架，模拟了Flask网站上“@app.route(‘/')”第一条例子的行为。如果你错过了那篇“这不是魔
- 本文实例讲述了python使用正则表达式分析网页中的图片并进行替换的方法。分享给大家供大家参考。具体分析如下：这段代码分析网页中的所有图片表
- 目录一、Python GUI 编程简介二、流行GUI框架总结三、代码演示四、界面一、Python GUI 编程简介Tkinter 模块(Tk
- 有个帖子写的检查全角的 <script> fun
- 前言：array.map() 是一个非常有用的映射函数：它接收一个数组和一个映射函数，然后返回一个新的映射数组。然而，有一个替代 array
- Pycharm安装pywin32报错1、在pycharm的寻找并安装插件pywin32时报错大致意思是安装失败，建议的解决方案：尝试从系统终
- 本文实例讲述了Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据。分享给大家供大家参考，具体如下：一、Logistic
- 1.func Copy(dst Writer, src Reader) (written int64, err error)这个函数是从一个
- 导语元宵节，又称上元节、灯节，是春节之后的第一个重要节日。相传，汉文帝（前179—前157年）为庆祝周勃于正月十五勘平诸
- 身份证校验码的计算方法1、将前面的身份证号码17位数分别乘以不同的系数。第i位对应的数为[2^(18-i)]mod11。从第一位到第十七位的
- 本文实例讲述了PHP使用JpGraph绘制折线图操作。分享给大家供大家参考，具体如下：下载jpgraph类库，使用的是src目录下的类文件。
- 如下所示：1. 在PyCharm下安装pyinstaller2. 在Terminal下输入：“pyinstaller -F -w *.py”
- 前言最近在开发项目时遇到了发现一个问题，gorm虽然可以自动帮你维护 created_at、updated_at、deleted_at这些关
- 实际开发中，有时候系统提供的异常类型不能满足开发的需求。这时候你可以通过创建一个新的异常类来拥有自己的异常。异常类继承自 Exception
- 经常开发asp但对于细致的说法，真实不太清楚，这里简单的介绍下。一般情况下读取数据都是用rs.open sql,conn,1,1修改数据:r
- 函数: # 什么是函数：一系列python语句的组合，可以在程序中运行一次或者多次# 一般是完成具体的独立的功能# 为什么要使用函数# 代码
- 【添加事件机制】 addEventListener 和 attachEvent[W3C]addEvent
- 1. 引言序列化是将对象转换为可以在以后保存和检索介质中的过程。比如，将对象的当前状态保存到文件中。对于一些复杂的项目，序列化是所有开发人员
