本篇讲解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. LVS集群之DR模式 实现

    ps:做 dr 模式 之前,先把之前做过的操作清空掉 1.ipvsadm -ln 查看规则 2.ipvsadm -C 清空规则 3.ipvsadm -ln 确认 4.iptables -t nat - ...

  2. SQL入门语句之运算符

    运算符是一个保留字或字符,主要用于连接WHERE后面的条件. 一.算数运算符 运算符 描述 + 加法 - 把运算符两边的值相加 - 减法 - 左操作数减去右操作数 * 乘法 - 把运算符两边的值相乘 ...

  3. 利用委托与Lambada创建和调用webapi接口

    前言 现在项目中用的是webapi,其中有以下问题:    1.接口随着开发的增多逐渐增加相当庞大. 2.接口调用时不好管理. 以上是主要问题,对此就衍生了一个想法: 如果每一个接口都一个配置文件来管 ...

  4. 去掉input框点击时的默认颜色

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  5. jQuery和AngularJS的区别小分析

    最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs ...

  6. Linux下四款Web服务器压力测试工具（http_load、webbench、ab、siege）介绍

    一.http_load程序非常小,解压后也不到100Khttp_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载.但是它不同于大多数压力测试工具,它可以以一个单一的进程运行,一般不会把 ...

  7. 各种解析漏洞获取Webshell

    各种解析漏洞拿shell  一.IIS 6.0解析漏洞 IIS 6.0解析利用方法有两种1.目录解析/xx.asp/xx.jpg2.文件解析wooyun.asp;.jpg第一种,在网站下建立文件夹的名 ...

  8. 如何使用的Ue4自带的SQLiteSupport

    在UE4.6版本加入的模块.可以让开发者使用SQLite数据库.SQlite是个轻量型的本地数据库. 我下面就来介绍一下如何使用这个模块. 第一步:下载SQLite源代码以及SQLite GUI管理工 ...

  9. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

  10. 【BZOJ1725】[Usaco2006 Nov]Corn Fields牧场的安排 状压DP

    [BZOJ1725][Usaco2006 Nov]Corn Fields牧场的安排 Description Farmer John新买了一块长方形的牧场,这块牧场被划分成M列N行(1<=M< ...