在前端开发的时候，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. MySQL常用函数及日期

    一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 SELECT ABS(-1) -- 返回1 CEIL(x),CEILING(x) 返回大于或等于x的最小整数 ...

  2. webpack 打包js和css

    首先进行全局安装webpack npm install -g webpackcmd跳转到项目的文件夹,安装webpack npm install --save-dev webpack接着需要packj ...

  3. angular element()

    使用angular.element()获取一个dom的方法. 1.可以使用jquery的选择器 2.可以使用javascript的原生的的查找元素的方法 下面是angular.element()提供的 ...

  4. 基于Intranet的零件库管理信息系统设计--part01

    好吧,临近毕业的我,毕业设计还没开始做呢.时间不等人,再过两个月就要答辩了,我得开始做我的毕设了,虽然我现在还没能力完全把毕设做出来,但总得先迈出第一步吧.今天先做一小部分. 话不多说,先来看我得毕业 ...

  5. datagrid-detailview.js easyui表格嵌套

    datagrid-detailview.js easyui表格嵌套

  6. 3. Longest Substring Without Repeating Characters - 最长无重复字符子串-Medium

    Examples: Description: Given a string, find the length of the longest substring without repeating ch ...

  7. 第三方登录 ----QQ登录

    学习之前,请大家先看一下oAuth协议. 首先呢,我们进入QQ互联的官方网站 http://connect.qq.com登入我们自己的QQ号,没有QQ号的小伙伴可以忽略本篇博文分享!

  8. python之函数学习

    #!/usr/bin/env python # # =============================================== # 位置参数说明 # 位置参数 通过参数传递的位置来 ...

  9. 02 nodejs命令参数（NodeJS基础入门）

    声明:本文章可供有一定js基础的朋友参考nodejs入门,本文未讲解nodejs的安装,如有需要的同学可以加QQ3382260752找我,进行交流学习. 建议使用开发软件:webstorm或hbuil ...

  10. XML查询

    XPath是XML的查询语言,其内容相当复杂.可以查阅www.w3.org/TR/xpath. 下面以一个实例简单了解一线XPath的查询方法: public partial class Form1 ...