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，后面会解释。
三、特性分类的选择符列表
以下是一个按特性分类的选择符的列表：
单从上面这个表来看，貌似不大好理解，下面再给出一张表：
通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0(后面会讲到)。
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
优先级问题其实就是一个冲突解决的问题，当同一个元素(内容)被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。
说到这里，我们不得不说一下CSS的继承性。
四、CSS的继承性
4.1 继承的表现
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
样式定义：
举例代码：
举例效果：
这段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。很显然，这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。
然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们仍以上面的举例代码为例：在样式定义中添加一条：
举例效果：
发现只需要给加个颜色值就能覆盖掉它继承自的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。
4.2 继承的局限性
继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。
有一些属性不能被继承，如：border, margin, padding, background等。
样式定义：
举例代码：
预期效果：
实际效果：
从上面的效果中，我们可以看出，border是不能被继承的，还有一些其它的属性也是如此，这里就不一一列举。
五、总结
选择器优先级：
#id(id选择器)>.class(类选择器)>标签选择器标签 #id >#id ; 标签 .class>.class指向越具体，优先级越高。
四种引用方式的优先级：行内式>嵌入式>外部样式外部样式中，无论是链接式，还是导入式。后引入的优先级高于出现在前面的。如果在<head>中存在多个<style>标记，那么这些标记和链接式之间将由先后顺序决定优先级，而在同一个<style>内部，才会遵循嵌入式优先于导入式的规则。
六、附加说明
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。
2、有!important声明的规则高于一切。
3、如果!important声明冲突，则比较优先权。
4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
6、关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。
还需要说一下，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其它规则定义之前的，这可能会引发一些误会。
优先权问题看起来简单，但背后还是有非常复杂的机制，在实际应用中需要多多留意。
CSS优先级的详细解说的更多相关文章
- css选择器及css优先级
三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- css 优先级 机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...
- z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...
- css优先级和层叠
css优先级和层叠 1.优先级 计算方法: a.行内样式 b.id选择器的数量 c.类,伪类和属性选择器的数量 d.标签选择器和伪元素选择 ...
- 使用background和background-image对CSS优先级造成影响
在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- CSS优先级算法是如何计算？
CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...
- CSS优先级总结(转载)
样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...
- css优先级计算
主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同 ...
随机推荐
- leetcode155 Min Stack
题意:模拟一个最小栈,可以push,pop,top,和返回栈中最小值. 思路:已经忘了栈是怎么构建的了,晕···尝试了半天,错误,发现直接用stack数据结构来做最方便,再用一个栈来存最小值.值得注意 ...
- 安装xampp之后如何建立远程登录用户并修改登录方式和密码
其实xampp作为开发环是非常好用的,但是很少人将其用作生产环境,主要还是它的安全性较低,很多默认设置都存在安全漏洞,但是实际上使用xampp在Linux下面进行配置确实是很节省时间的一件事(如果你的 ...
- 【大视野入门OJ】1099：歌德巴赫猜想
Description 歌德巴赫猜想大家都很熟悉吧?给一个数,能够分解成两个素数的和.现在要给你一个n,6 <= n < 1000000,让你求他会分解成哪两个素数?如果存在多组解,则要求 ...
- 安卓 应用app启动过程
韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com 从用户点击 Launcher 上的 App 图标,到显示出 App 界面时主要发生的事情.知晓以 ...
- BZOJ 1098 [POI2007]办公楼biu（反向图bfs+并查集优化）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1098 [题目大意] 现在有一张图,要求将这张图的点划分为尽量多的分组,对于不同分组的两 ...
- 【二分】【字符串哈希】【二分图最大匹配】【最大流】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem I. Minimum Prefix
给你n个字符串,问你最小的长度的前缀,使得每个字符串任意循环滑动之后,这些前缀都两两不同. 二分答案mid之后,将每个字符串长度为mid的循环子串都哈希出来,相当于对每个字符串,找一个与其他字符串所选 ...
- MySQL中变量的定义和变量的赋值使用（转）
说明:现在市面上定义变量的教程和书籍基本都放在存储过程上说明,但是存储过程上变量只能作用于begin...end块中,而普通的变量定义和使用都说的比较少,针对此类问题只能在官方文档中才能找到讲解. 前 ...
- IRC程序学习
%%聊天的中转站,将{chan,MM,Msg}形式的信息转化为 {mm, MM, Msg}形式 -module(mod_chat_controller). -export([start/3]). -i ...
- django框架下celery+rabbitmq+flower完成异步任务
[转载请注明出处:] http://www.cnblogs.com/yukityan/p/8035787.html 环境: ubuntu16.04 64位 安装: sudo apt-get insta ...
- dump备份mysql表
Auth: Jin Date: 20140403 Content: #!/bin/bash - ### auth: Jin ### ### Desc: 备份输入库里的所有表,清理指定天前的备份文件 # ...