在前端开发的时候，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. Caused by: java.lang.RuntimeException: java.io.IOException: invalid constant type: 18

    工程启动的时候有报下面这个错误的,更新下工程的jar包依赖,然后在工程的pom文件里加上下面的jar包 Caused by: java.lang.RuntimeException: java.io.I ...

  2. 在VM中给Linux安装Tool

    1.导入tool 2.解压tool 3.打开终端,进入tool的目录,输入  ./XXXXXXX.pl 4.进入安装界面,不断回车即可

  3. Solr5.2.1+Zookeeper3.4.8分布式集群搭建

    1.选取三台服务器 由于机器比较少,现将zookeeper和solr都部署在以下三台机器上.(以下操作都是在172.16.20.101主节点上进行的哦) 172.16.20.101 主节点 172.1 ...

  4. Angular4.0.0正式版发布

    来源于angular4.0.0发布时的公告,译者:niithub 原文发布时间:Thursday, March 23, 2017 翻译时间:2017年3月24日 angular4.0.0正式版现在可以 ...

  5. javascript中构造StringBuffer实例

    function StringBuffer(){      this.strings = new Array;  }    StringBuffer.prototype.append=function ...

  6. shell中的条件表达式

    条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] [[expression]] test expression 这三种条件表达式的效果是一样的 比较符 整数比 ...

  7. vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"& ...

  8. Oracle SQL 语言分类

     Oracle SQL语句分类 2008-06-17 11:15:25 分类: Linux * 2008/06/17  星期二*蒙昭良*环境:WindowsXP + Oracle10gR2*Oracl ...

  9. WebService返回数据前台获取并处理JSON的相关问题

    起因: 记录这个问题的起因是一次解答网友的问题,当初自己初次接触webservice时也遇到过,但在写答案时,并没有很深的印象,只是知道webservice在后台返回值的时候,那里是有个坑的.网友问的 ...

  10. jquery练习之瀑布流

    最近有空简单学习了下瀑布流,写完后想和大家一起分享下,但我知道我的代码有很多缺陷不足,希望多多包涵.(纯属兴趣非专业学习人士) 众所周知,瀑布流大概分为2种,一种是浮动式的瀑布流,一种是定位式的瀑布流 ...