本篇讲解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样式覆盖规则）的更多相关文章

  1. CSS中一些不经意的细节问题1

    CSS这样的语法,细节问题非常多,往往一些难以处理的问题,有可能是一些细节问题不到位,所以先记下一些,留给以后自己看看. 1.line-height:150%与line-height:1.5 的区别 ...

  2. CSS选择器深入探讨（细节东西）（转）

    细节决定成败,越是注重细节方面的东西,那么你完成的作品就越完美. 1.父子选择器(看作组合比较好理解) 父子选择器可以有多级(但是在实际开发中最后不好超过三层) 如:html中文件片段: <!- ...

  3. 深入理解css优先级

    为什么要写这篇文章是因为 <style type="text/css"> body h1 { color: green; } html h1 { color: purp ...

  4. CSS样式权重的级联cascade的概念

    我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以 ...

  5. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  6. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  8. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  9. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

随机推荐

  1. spring集成常用技术的配置

    使用spring集成其他技术,最基本的配置都是模板化的,比如配置视图模板引擎.数据库连接池.orm框架.缓存服务.邮件服务.rpc调用等,以spring的xml配置为例,我将这些配置过程整理出来,并不 ...

  2. git mac客户端使用提交与同步

    点击file -> add local  repository 将本地已经存在的git库添加到客户端中 当项目有改变时,点击正上方居中的Uncommitted Change按钮查看改变的内容 在 ...

  3. 关于搭建webservice以及无法通过URL访问的简易解决办法

    之前工作天天在用webservice,但是从没有自己独立的搭建一个全新的项目,今天好不容易自己搭了一个webservice,报错不少,记录下来免得以后又忘了. 一.搭建webservice需要做的几点 ...

  4. php总结二篇

    PHP的网站主要攻击方式: 1.命令注入(Command Injection) 2.eval注入(Eval Injection) 3.客户端脚本攻击(Script Insertion) 4.跨网站脚本 ...

  5. ytu 1057: 输入两个整数，求他们相除的余数（带参的宏 + 模板函数 练习）

    1057: 输入两个整数,求他们相除的余数 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 177  Solved: 136[Submit][Status ...

  6. 最大公约数和最小公倍数--java实现

    代码: //最大公约数 public int gcd(int p,int q){ if(q == 0) return p; return gcd(q, p % q); } //最小公倍数 public ...

  7. 比较典型的带case的group by语句

    2005-05-09 胜 2005-05-09 胜 2005-05-09 负 2005-05-09 负 2005-05-10 胜 2005-05-10 负 2005-05-10 负 如果要生成下列结果 ...

  8. 命令大全/cmd/bash

    端口占用及强杀 cmd命令 netstat -aon|findstr "8080" #查看占用pid tasklist|findstr "2448" #查看被哪 ...

  9. DataSet、DataTable、Json、List 等各种数据的相互转化

      1.根据Dataset生成json格式的字符串,不管Dataset里面有多少个表都可以一一生成对应的json字符串,并一次性返回 private string dsToJson(DataSet d ...

  10. 坑爹坑娘坑祖宗的87端口（记一次tomcat故障排查）

    原贴如下 坑爹坑娘坑祖宗的87端口(记一次tomcat故障排查) 虽然我用的是PHPstudy部署的dedecms,还是一样栽倒这个坑里了. 总结经验:本地测试使用8000~9000的端口比较安全.