本篇讲解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. October 15th 2016 Week 42nd Saturday

    Word to World. There are only two kinds of people who are really fascinating, people who know absolu ...

  2. 你真的了解iOS代理设计模式吗？

    在项目中我们经常会用到代理的设计模式,这是iOS中一种消息传递的方式,也可以通过这种方式来传递一些参数.这篇文章会涵盖代理的使用技巧和原理,以及代理的内存管理等方面的知识.我会通过这些方面的知识,带大 ...

  3. Revolving Digits（hdu 4333）

    题意:就是给你一个数字,然后把最后一个数字放到最前面去,经过几次变换后又回到原数字,问在这些数字中,比原数字小的,相等的,大的分别有多少个.比如341-->134-->413-->3 ...

  4. c语言中(*p)[n]和*p[n]的区别

    写于2016年12月5日. c语言中(*p)[n]表示的数组指针,在该表达式中按照运算的优先级,首先计算()的中*p,在和[n]计算.含义为指向含有n个元素的一维数组. *p[n]表示的是指针数组,在 ...

  5. 对SIL9022/9024的配置

    这里只是记录下对SIL9022.9024配置的I2C的数据,没有具体的程序.程序可以参考数据来做.程序官网也可能有. start of decoding Write to 0x72 0xBC ? 0x ...

  6. C/C++中无条件花括号的妙用

    C/C++中无条件花括号可以形成一个代码块,一个作用域.可以使括号内定义的变量就只在本域(就是这个大括号)内有效,而且不会影响其他域,即使名字相同. 在花括号内,如果变量前面带类型,则相当于新创建一个 ...

  7. CozyRSS开发记录6-继续补全订阅内容栏

    CozyRSS开发记录6-继续补全订阅内容栏 1.订阅内容栏布局 按照之前的原型图,把订阅内容栏分成三块.Xaml如下: 2.照葫芦画瓢,完成头部和列表 头部依然使用ColorZone,右侧再放两个按 ...

  8. C# 类动态添加属性、方法

    问题: 需要动态为WPF中的DataGrid添加列,并动态绑定相应数据.(此处仅实现动态属性的添加和使用,关于动态方法的添加和使用详见推荐阅读) 实现关键点: 目标类继承DynamicObject,添 ...

  9. SOAPUI使用教程-创建MockResponse步骤

    MockResponse测试步骤监听一个SOAP请求并返回一个预先配置的响应,然后再继续. 传入的请求的能被断言检查. 这种TestStep使用场景是例如: 客户端测试,验证传入的请求并返回假或不正确 ...

  10. Java的四种内部类

    Java的四种内部类包括如下: 成员内部类 静态内部类 局部内部类 匿名内部类 成员内部类: 定义在另一个类(外部类)的内部,而且与成员方法和属性平级叫成员内部类,......相当于外部类的非静态方法 ...