我们来看一下一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color:yellow;
        }

        h1.title {
            color:red;
        }
    </style>
</head>
<body>
    <h1 class="title">我是H1</h1>
</body>
</html>

大家觉得h1这个元素应该是红色还是黄色的呢？

答案是红色的，但是为什么呢？答案就在于每个选择器的特殊性（specificity）。对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。

如果一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明就会胜出。

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0，0，0，0。一个选择器的具体特殊性如下确定：

对于选择器中给定的各个ID属性值，加0，1，0，0。

对于选择器中给定的各个类属性值，属性选择或伪类，加0，0，1，0。

对于选择器中给定的各个元素和伪元素，加0，0，0，1。伪元素是否有特殊性，在这方面css2有些自相矛盾，不过css2.1很清楚的指出，伪元素有特殊性，而且其特殊性为0，0，0，1。

通配选择器对一个选择器的特殊性没有贡献。换句话说，其特殊性为0,0,0,0。

　　h1{ color:yellow; }//0,0,0,1

　　h1.title{color:red;}//0,0,1,1

选择器h1.title之所以能赢，是因为它多了一个1；0,0,1,1大于0,0,0,1；浏览器在计算这些值的时候从左到右排序的。

所以如果有这么两条样式的话

<style>

        h1 {

            color:yellow;

        }

        body h1{

            color:red;

        }

</style>

　　h1{ color:yellow; }//0,0,0,1

　　body h1{color:red;}//0,0,0,1

　　当浏览器计算出两条规则特殊性一样的话，就会按照顺序来，下面的会覆盖前面的规则。

　　那么第一个0代表什么呢，一般地，第一个0是为内联样式声明保留的，它比所有其他声明的特殊性都高。

　　有时某个声明可能非常重要，超过了所有其他声明。CSS2.1称之为重要声明（原因显而易见），并允许在这些声明的结束分号之前插入！important来标志。

　　p.dark {color:#333 !important; background: white;}
　　在此为颜色值#333加了标志！important,而背景值white未加这个标志。如果你希望把两个声明都标志为重要，那么每个声明都需要它自己的!important标志：

　　p.dark {color:#333 !important; background: white !important;}
　　必须正确地放置!important,否则声明将无效。！ important总是放在声明的最后，即分号前面。如果一个属性的值可以包含多个关键词，如font,这一点则尤其重要，必须将!important标志放在声明的最后：

　　p.light {color: yellow; font: smaller Times, serif !important;}
　　如果!important放在font声明的任何其他位置，整个声明都将无效，相应地不会应用其任何样式。

CSS选择器中的特殊性的更多相关文章

  1. 【轻松前端之旅】​CSS选择器中的空格与尖括号有何区别？

    CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...

  2. css选择器中:first-child 与 :first-of-type的区别

    ## css选择器中:first-child 与 :first-of-type的区别 ---- :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比 ...

  3. CSS选择器中带点(.)怎么办？

    在SharePoint中很多元素的ID都用点(.)来连接的,比如: <li class="ms-cui-group" id="Ribbon.Documents.Ed ...

  4. css 选择器中的正则表达式

    正则表达式在任何语言中都有使用,只是使用的形式不一样而已 css也是一门语言,也有自己的正则表达式 正则表达式中的一些通用规则: 1 ^ 表示字符串开始位置匹配 2 $表示字符串结束为止匹配 3 *表 ...

  5. css选择器中:first-child与:first-of-type的区别

    :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: ...

  6. [转] css选择器中:first-child与:first-of-type的区别

    :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: ...

  7. CSS系列：CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  8. 【CSS】使用CSS选择器

    CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器 有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic s ...

  9. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

随机推荐

  1. 第二天：python的函 数、循环和条件、类

    https://uqer.io/community/share/54c8af17f9f06c276f651a54 第一天学习了Python的基本操作,以及几种主要的容器类型,今天学习python的函数 ...

  2. 静态方法和实例方法（mark）

    借花献佛[转自 ivony's blog] 关于静态方法和实例方法的一些误区. 一.    静态方法常驻内存,实例方法不是,所以静态方法效率高但占内存.     事实上,方法都是一样的,在加载时机和占 ...

  3. json之dump和dumps，load和loads

    import json#反序列化f = open('test', 'rb')data = json.load(f) #相当于下句# data = json.loads(f.read()) #序列化f ...

  4. java 对小数位的处理 BigDecimal DecimalFormat 常用操作 浅解

    [博客园cnblogs笔者m-yb原创, 转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] htt ...

  5. ESP32搭建3.ubuntu14.04下搭建esp32开发环境 （10-5）

    硬件为乐鑫出品的ESP32一款集成了wifi和蓝牙的集成模块. 1.首先ctrl+alt+t打开终端,sudo -s选择用root权限登陆 . 2. 输入指令:sudo apt-get install ...

  6. jmeter如何进行MQTT性能测试（测试前期准备二，MQTT插件及协议了解）

    jmeter插件下载地址及使用,已经有大佬总结好了 大佬的博客地址: https://blog.csdn.net/yellowanwu/article/details/50889677 添加线程组:添 ...

  7. Exploit-Exercises nebule 旅行日志（三）

    继续探索之路,经过昨天的题目,忽然有那么点开窍了,今天继续: 看题目,还是用level对应的级别的帐号和密码登录,flag02的程序源码如图上所示,getegid 和 geteuid就不说了,这个程序 ...

  8. NPOI处理Word文本中段落编号

    NPOI的XWPFParagraph对象中,是无法直接读取段落编号的,然而可以读取的是编号的样式名称(GetNumFmt),编号分组ID(GetNumID),编号样式(NumLevelText)等.具 ...

  9. Handler使用小结

    个人概念里面handler用来更新UI.一直有一个问题困恼我,为什么我在主线程里面创建一个Handler不需要传递传递Looper,而在一个子线程里面必须调用Looper.prepare, Loope ...

  10. Problem A: STL——灵活的线性表

    Description 数组和链表是我们熟知的两种线性结构,但是它们不够灵活(不能同时实现直接插入.删除和访问操作),给你若干种操作,你能通过一种灵活的容器,实现它们的功能吗? 操作1:Build a ...