本篇讲解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. hive创建索引

    索引是hive0.7之后才有的功能,创建索引需要评估其合理性,因为创建索引也是要磁盘空间,维护起来也是需要代价的 创建索引 hive> create index [index_studentid ...

  2. 支付宝通知页面notify_url、返回页面return_url

     返回页面(return_url文件)工作原理 即:商户系统请求/支付宝响应交互模式 1. 构造请求数据 商户通过提供的接口代码示例,通过代码示例的规则,程序构造与运算得到sign加密结果以及构造后的 ...

  3. Pyqt 控件的信号槽事件定义方法

    转载来自:http://my.oschina.net/midnite/blog/39399 Qt采用信号槽来设定UI界面上元素动作的事件绑定.自Qt4.5开始,引入了一个新的信号槽与事件绑定的方法.界 ...

  4. c# 针对SAP服务通讯

    对于sap完全没有概念. 不知道是什么,也不想了解过多.还是像针对一个技能好好的研究一下. 年前的一个项目遇到c#调用SAP来实现一些业务逻辑对于我这个门外汉确实有点摸不着头闹.捋顺一下思路. . 结 ...

  5. [perl]字符串转拼音首字母(支持多音字)

    实现的思路是,查表找到该字的所有读音,然后取首字母. 代码: while (<DATA>) { chomp; })(.*)$/; $all =~ s/^\s+//; ### 只保留无音标号 ...

  6. nodejs review-01

    lesson lesson-code 05 Run your first web server 使用curl //指定方法;显示header信息 curl -X GET -i localhost:30 ...

  7. activity 、window与view的关系 （上）

    我在研究任玉刚老师的<android开发艺术探索>的关于windowmanager那一章时,我发现自己对于acitivity.window和view之间的概念还是比较模糊. 然后查了一下a ...

  8. 清华学堂 列车调度（Train）

    列车调度(Train) Description Figure 1 shows the structure of a station for train dispatching. Figure 1 In ...

  9. pointers on c (day 1,chapter3)

    第3章 数据 c中,仅有4中基本数据类型——整型.浮点型.指针和聚合类型(如数组和结构等). 整型:字符.短整型和长整型,它们都分为有符号(signed)和无符号(unsigned). short i ...

  10. OS X El Capitan的 U 盘制作过程

    本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书”     0.在 AppStore 下载 OS X El Capitan AppStore ...