在前端开发的时候，css构建样式规则，这个时候我们会遇到一个问题：当我们对同一个元素做多个样式规则，其中发生了冲突的时候，css是如何选择最终呈现的样式

如下：

            div{

                color:red;

            }

            div.main{

                color:blue;

            }

            div#main2{

                color:green

            }

    <body>

        <div class="main" id="main2">
　　　　　　ssss

        </div>

    </body>

最终这个“sss”会是什么颜色呢？这就却决于css选择器的特殊性：

特殊性的描述可分为四个部分：如：0，0，0，0

什么意思呢？这四个数字，是有优先级的，这就类似于nvidia的显卡

我们先做如下定义：

四个数字，按位比较，从左到右优先级依次降低，每一位数字越大，特殊性越大，特殊性越大，有冲突的选择器规则将被使用到最终效果

用于比较时候：

从左往右比较两个选择器的特殊性，比较按同位比，如果当前位上，选择器1大于选择器2，选择器1特殊性大；如果当前位上，选择器1小于选择器2，选择器2特殊性大；如果相等，跳过当前位，比较下一位，方法与当前位同理

举例：（由大到小的特殊性）

1，0，0，0>

0，2，0，0>

0，1，2，0>

0，0，3，0>

0，0，1，0>

0，0，0，1>0，0，0，0

请先理解上面的例子，后面我们使用这种方式描述特殊性

我们看到特殊性描述一共有4位数，就像数学里的千，百，十，个一样

第一位：内联样式

第二位：ID选择器（#main）

第三位：类选择器，属性选择器或伪类（.main 或 input[name=main] 或 a:hover li:first-child）

第四位：元素或伪元素(p,div,input等常用的元素，伪元素比如p:first-letter p:first-line)

通配符*(0,0,0,0)

空格什么都不算（0,0,0,0都谈不上，最小特殊性）对选择器特殊性没有任何影响

举例：

假设以下的选择器指向同一个元素，并且出现了矛盾

 h1{color:red;}    /**/

 p em{color:silver;}    /**/

 .grape{color:purple;}    /**/

 *.bright{color:blue;}    /**/

 p.bright{color:green;}    /**/

 #id{color:black;}    /**/

 div#id{color:yellow;}    /**/

很显然最后这个这个元素，是黄色（yellow），因为他的特殊性最大！

下一个，重要性！important，重要规则总会胜出

有时候某个声明可能非常重要，超过了所有其他声明，css2.1开始允许在声明“；”符号前使用important

p.light{

    color:yellow !important;

    font-size:200px !important;

}

必须在分号之前声明最后插入，哪一个规则需要强调，就加上这个!important

标志为!important的声明并没有特殊的特殊性值，不过要与非重要声明分开来考虑

如果一个重要声明和非重要声明起了冲突，重要的必定会胜利

css优先级之特殊性的更多相关文章

  1. css优先级计算规则

    原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...

  2. CSS优先级的详细解说

    一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...

  3. 前端css优先级以及继承

    1.css优先级以及继承 css具有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 有一些属性是可以继承下来 : color . fo ...

  4. 【学习笔记】CSS优先级规则

    CSS的优先级规则很多地方的说法都是错误的,常见错误说法是inline css>内部样式>外部样式,其实并没有这种规定.真正的CSS优先级确定是通过特性值大小确定的,在特性值大小相同的情况 ...

  5. CSS 优先级判断

    在面试中被问到这个问题 来记录下  发现自己之前之所以会忘记还是缺少理解的记忆 参考 CSS权威指南 一个CSS选择器的特殊性值表述为4个部分  0 0 0 0 对于选择器中给定的各个ID的属性值   ...

  6. css选择器及css优先级

    三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...

  7. 关于CSS的优先级,CSS优先级计算

    原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...

  8. css 优先级 机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...

  9. z-index、display、selector选择器优先级css优先级面试用到

    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...

随机推荐

  1. 读headFirst设计模式 - 装饰者模式

    继承可以在复用父类代码的情况下扩展父类的功能,但同时继承增加了对象之间的耦合度,所以要慎用继承.那么有没有既能扩展父类的功能,又能使对象间解耦的方法呢?答案是肯定的,这就是我们今天要学习的装饰者模式. ...

  2. 我的java学习笔记

    最近一直在自学C#和js,想着想把以前学的java学习笔记整理下发上来.

  3. 2015.07.12hadoop伪分布安装

    hadoop伪分布安装   Hadoop2的伪分布安装步骤[使用root用户用户登陆]other进去超级用户拥有最高的权限 1.1(桥接模式)设置静态IP ,,修改配置文件,虚拟机IP192.168. ...

  4. Python快速入门（5）

    os模块:操作系统接口 应该用 import os 风格而非 from os import * .这样可以保证随操作系统不同而有所变化的 os.open() 不会覆盖内置函数 open() 在使用一些 ...

  5. 浅谈C10K问题

    在大型的APP中进行高并发的访问,淘宝,支付宝,微信,QQ,等 C10K问题:高并发的进行访问 C10K问题的最大特点是:设计不够良好的程序,其性能和连接数及机器性能的关系往往 是非线性的.举个例子: ...

  6. HTML5 的WebSocket

    认识HTML5的WebSocket

  7. 【转】HTML5 本地存储五种方案

    1.LocalStorage LocalStorage就是Key-Value的简单键值对存储结构,Web Storage除了localStorage的持久性存储外,还 有针对本次回话的sessionS ...

  8. js随机模块颜色

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  9. 对象的创建过程（chapter5.7.3）

    总结一下对象的创建过程,假设有一个名为Dog的类: 1. 即使没有显示地使用static关键字,构造器实际上也是静态的方法,因此,当首次创建类型为Dog的对象时(构造器可以看成静态方法),或者Dog类 ...

  10. jQuery基础学习(三)—jQuery中的DOM操作

    一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法 ...