本篇讲解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. 20.SqlServer中if跟循环语句

    --if语句declare @i int begin print @i end else --循环语句 declare @i int begin insert into grade(classname ...

  2. 4. UIButton的使用

    1. UIButton的初认识 来自:http://www.cnblogs.com/mcj-coding/p/5103891.html QQ:853740091 1.1 UIButton 是iOS 开 ...

  3. bzoj3439 trie+可持久化线段树

    挺好想的 trie建树后,按dfn序建可持久化 注意:计数变量多的题目一定要注意检查会不会用的时候搞混了 #include <cstdio> #include <cstdlib> ...

  4. SQL入门语句之ORDER BY 和GROUP BY

    一.SQL入门语句之ORDER BY ORDER BY 是用来基于一个或多个列按升序或降序顺序排列数据 1.从数据库表获取全部数据按字段A的升序排列 select *from table_name o ...

  5. singleton pattern的推荐实现

    一.单例模式的C#实现: (1)使用double-checked locking的方式: public sealed class Singleton { private static volatile ...

  6. xml 基础学习备忘

    <?xml version="1.0" encoding="UTF-8"? standalone="yes"> 这里的encod ...

  7. ASP.NET4.5Web API及非同步程序开发系列(1)

    认识非同步程序开发设计模型 从VS2012开始引入的新的非同步程序设计的支持-------async/await设计模型 之前的当我们支持非同步作业的时候,往往使用多线程开解决,我们比较熟悉的就是 执 ...

  8. 学习微信小程序之css2

    一:伪类的使用 .class-btn:active{ color: red;} <button class="class-btn">并集选择器</button&g ...

  9. Microchip微芯HCS301解密HCS360解密HCS361芯片解密多少钱？

    Microchip微芯HCS系列芯片解密型号: HCS101 | HCS200 | HCS201 | HCS201T | HCS300 | HCS300T HCS301 | HCS301T | HCS ...

  10. Light oj1031 Easy Game (区间dp)

    题目链接:http://vjudge.net/contest/140891#problem/F A和B都足够聪明,只有我傻,想了好久才把代码和题意对应上[大哭] 代码: #include<ios ...