在前端开发的时候，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. R语言数据分析利器data.table包 —— 数据框结构处理精讲

        R语言data.table包是自带包data.frame的升级版,用于数据框格式数据的处理,最大的特点快.包括两个方面,一方面是写的快,代码简洁,只要一行命令就可以完成诸多任务,另一方面是处理 ...

  2. java根据HashMap中的值将其元素排序

    思路:HashMap或Map本身没有排序功能,若要进行较轻松的排序,可利用ArrayList中的sort方法 例子: import java.util.ArrayList; import java.u ...

  3. 关于binary log那些事——认真码了好长一篇

    本文介绍binlog的作用以及几个重要参数的使用方法,同时通过实验来描述binlog内部记录内容:row .statement跟mixed的设置下,记录了哪些东西,最后会简单介绍下binlog ser ...

  4. WPF+AE开发小结--TOCControl右键菜单删除图层

    1.WPF项目中添加toccontrol控件,如何添加,网上有很多方法,可自行搜索,这里不再赘述,代码如下 <Window x:Class="AE.MainWindow" x ...

  5. Unity 3D Framework Designing(4)——设计可复用的SubView和SubViewModel(Part 1)

    『可复用』这个词相信大家都熟悉,通过『可复用』的组件,可以大大提高软件开发效率. 值得注意的事,当我们设计一个可复用的面向对象组件时,需要保证其独立性,也就是我们熟知的『高内聚,低耦合』原则. 组件化 ...

  6. 使用 ipdb 调试 Python

    1.安装 pip install ipdb 2.使用 python -m ipdb xxx.py 程序内部: from ipdb import set_trace set_trace() 3.常用命令 ...

  7. Node.js编程之异步

    异步操作 Node采用V8引擎处理JavaScript脚本,最大特点就是单线程运行,一次只能运行一个任务.这导致Node大量采用异步操作(asynchronous opertion),即任务不是马上执 ...

  8. 2017-3-28 javaScript DOM 操作

    一.DOM的基本概念:DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化得东西. 二.Windows  对象操作:1.属性和方法:属性(值或者子对象):o ...

  9. [SinGuLaRiTy] 2017-03-30 综合性测试

    [SinGuLaRiTy-1014] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有的题目:Time Limit:1s  |  Me ...

  10. 4.Maven仓库

    1. 何为Maven仓库 Maven仓库就是统一存放所有依赖的地方,其他所有项目都可以在仓库里通过坐标找到所需要的依赖. 2. 仓库的布局 任何一个构件都有其唯一的坐标,根据这个坐标可以定义其在仓库中 ...