CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）
本篇讲解CSS特异性（CSS Specificity）的细节，也就是CSS样式选择器的权重计算
通过计算选择器的权重（weight）最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定，即“优先原则（priority rules）”！
首先，我们来一个简单的例子：
<body>
<ul id="summer-drinks">
<li class="favorite">First section</li>
<li>Second section</li>
<li>Third section</li>
</ul>
</body>
设置样式：
<style>
ul#summer-drinks li {
font-weight: normal;
font-size: 12px;
color: black;
}
.favorite {
color: red;
font-weight: bold;
}
</style>
截图：
然后查看效果我们发现，效果并不是我们想要的，我们favorite列文本文字并没有变红和加粗，这儿肯定出了一些意想不到的事，注意下面我们可以知道，我们的麻烦出现在这儿：
ul#summer-drinks li {
font-weight: normal;
font-size: 12px;
color: black;
}
两个不同的CSS选择器同时设置了文字的color和font-weight，而仅仅font-size只声明了一次，因此我们可以很清晰的看到效果。对于“冲突”，浏览器必须做出选择，哪一个选择器样式最终产生效果。也就引出了以下一系列标准特异性（即权重优先级）的规则
计算CSS样式选择器优先级的“值”
先看看实际选择器脚色扮演优先级：
在这里我们形象的设定：
1、如果元素拥有内联样式（inline style），那么给内联样式1000点 例如：<h1 style="color:#fff;">
2、对于每个ID，我们给他0100点 例如：#div
3、对于每个Class、伪类（pseudo-classes）或属性选择器，我们给他0010点 例如：.classes，[attributes]和:hover，:focus
4、对于每个具体标签元素引用和伪元素（pseudo-elements），我们给他0001点 例如：:before和:after
这里数字你可以看成一般的数字计数什么的，例如0100，就可以看做100，只是下面运用形象点而是用0100
下面举例说明：
例一：
ul#nav li.active a
例二：
body.ie7 .col_3 h2~h2
例三：
#footer *:not(nav) li
注意：“ :not() ”自身没有权重值（这里权重值是指上面的数点，像0100），仅括号内的有权重值！
例四：
<li style="color:red;">
例五：
ul > li ul li ol li:first-letter
例六：
A：
div#demo{background-image:url(n.gif);}
B：
div[id="demo"]{background-image:url(n.gif)}
代码：
<!DOCTYPE html>
<html>
<head>
<style>
div{
height:100px;
width:100px;
}
div#demo{
background:red;
}
div[id="demo"]{
background:green;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
截图：
这里可以验证出：A情况中的权重比B中的权重高一点，也就是ID选择器的权重比属性选择器权重高
重点注意：
1、*选择器没有权重值，当然我们可以形象设定他的权重值为0000点
2、我们设定伪元素（例如：“ :first-line ”）权重值为0001点，而设定伪类权重值为0010点
3、伪类中“ :not() ”本身不计权重值，而在其括号里的则相应设定权重值
4、“ !important ”比较高级，权重比内联样式的权重还高，他的样式设定可以覆盖内联样式的样式，当然了，我们可以用相同的“ !important ”去设定不同样式来 覆盖先前的“ !important ”设定的样式（这里需要知道，同一样式文件中，相同选择器多次声明样式时，是后声明的样式也就是最新声明的覆盖前面声明的样式），这里我们也可以形象的设定“ !important ”的权重值为10000点
5、ID选择器权重比属性选择器权重高一点 例：如上例六
参考文章：
Chris Coyier的Specifics on CSS Specificity
Vitaly Friedman的CSS Specificity: Things You Should Know
至此，CSS选择器设定样式的优先级计算也就结束了，如果写的不好大家可以在评论中补充~~
谢谢~~
更多知识分享：微笑空间站
CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）的更多相关文章
- CSS中一些不经意的细节问题1
CSS这样的语法,细节问题非常多,往往一些难以处理的问题,有可能是一些细节问题不到位,所以先记下一些,留给以后自己看看. 1.line-height:150%与line-height:1.5 的区别 ...
- CSS选择器深入探讨（细节东西）（转）
细节决定成败,越是注重细节方面的东西,那么你完成的作品就越完美. 1.父子选择器(看作组合比较好理解) 父子选择器可以有多级(但是在实际开发中最后不好超过三层) 如:html中文件片段: <!- ...
- 深入理解css优先级
为什么要写这篇文章是因为 <style type="text/css"> body h1 { color: green; } html h1 { color: purp ...
- CSS样式权重的级联cascade的概念
我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以 ...
- 理解CSS
写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...
- 深度理解CSS样式表，内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
随机推荐
- Spring的测试
spring测试要引用junit及spring-test <dependency> <groupId>junit</groupId> <artifactId& ...
- cryptkeeper的使用
转自:http://www.linuxidc.com/Linux/2011-06/37070.htm Cryptkeeper 是加密文件系统 EncFS 的前端工具,以 Gnome Applet 方式 ...
- win10取消vpn使用远程默认网关
打开%AppData%\Microsoft\Network\Connections\Pbk,找到rasphone.pbk文件(当你新建拨号连接或者VPN连接之后会在这个目录创建一个.pbk的文件,这个 ...
- js原生
1.数组 shift unshift pop push 头删增 尾删增 // 数组 shift unshift pop push var str="a,b,c,d,e,f& ...
- hdu 5071(2014鞍山现场赛B题，大模拟）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5071 思路:模拟题,没啥可说的,移动的时候需要注意top的变化. #include <iostr ...
- python 安装模块
python安装模块的方法很多,在此仅介绍一种,不需要安装其他附带的pip等,python安装完之后,配置环境变量,我由于中英文分号原因,环境变量始终没能配置成功汗. 1:下载模块的压缩文件解压到任意 ...
- 踩坑事件：windows操作系统下的eclipse中编写SparkSQL不能从本地读取或者保存parquet文件
这个大坑... .... 如题,在Windows的eclipse中编写SparkSQL代码时,编写如下代码时,一运行就抛出一堆空指针异常: // 首先还是创建SparkConf SparkConf c ...
- CSS3 动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...
- *HDU3047 并查集
Zjnu Stadium Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- MySQL(Percona Server) 5.6 主从复制
MySQL(Percona Server) 5.6.15 主库:192.168.2.21 从库:192.168.2.22 例如我们同步的数据库为:test. 如果需要同步多个数据库下面会有说明. My ...