关于CSS specificity
CSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:
规则:
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则;
2.!important声明的Specificity值最高;
3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;
4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。

算法:
当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加,
{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity,
然后在比较取舍时按照从左到右的顺序逐位比较。

实例分析:
1.div { font-size:12px;}
分析:
1个元素{ div},Specificity值为0,0,0,1

2.body div p{color: green;}
分析:
3个元素{ body div p },Specificity值为0,0,0,3

3.div .sjweb{ font-size:12px;}
分析:
1个元素{ div },Specificity值为0,0,0,1
1个类选择符{.sjweb},Specificity值为0,0,1, 0
最终:Specificity值为 0,0,1,1

4.Div # sjweb { font-size:12px;}
分析:
1个元素{ div },Specificity值为0,0,0,1
1个类选择符{.sjweb},Specificity值为0,1,0, 0
最终:Specificity值为 0,1,0,1

5.html > body div [id=”totals”] ul li > p {color:red;}
分析:
6个元素{ html body div ul li p}  Specificity值为0,0,0,6
1个属性选择符{ [id=”totals”] }      Specificity值为0,0,1,0
2个其他选择符{ >  > }            Specificity值为0,0,0,0
最终:Specificity值为 0,0,1,6

!important 的优先级最高

css优先级问题的更多相关文章

  1. css选择器及css优先级

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

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

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

  3. css 优先级 机制

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

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

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

  5. css优先级和层叠

    css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择 ...

  6. 使用background和background-image对CSS优先级造成影响

    在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  7. CSS优先级算法是如何计算?

    CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...

  8. CSS优先级总结(转载)

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

  9. css优先级计算

    主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同 ...

  10. css 优先级

    css优先级的四大原则: 原则一: 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高.例子1:CODE:<style type="text/css"> &l ...

随机推荐

  1. 枚举Enum

    #region 根据枚举名称获取值或反之        /// <summary>        /// 根据枚举的名称,得到该枚中该名称对应的值        /// </summ ...

  2. Linux-001-nmon系统性能监控工具的使用及报表产出

    在进行性能测试的时候,需要获取服务器的各项指标,例如 CPU.MEM.I/O.DISK 等.网上有很多的监控工具,nmon 就是其中的一个,其可与 JMeter结合使用,测试系统的性能.其概要的介绍, ...

  3. Windows zabbix监控远程进程实现机制

    最近负责zabbix监控部署方面的工作,需要完成本地服务端监控远程虚拟机的运行状态(CPU.打开的进程等),与大家分享下我的实现方法. (1) 首先,需要实现记录zabbix客户端的进程的批处理:za ...

  4. Python学习【第十篇】基础之杂货铺

    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 百分号方式: ...

  5. hdfs shell 命令以及原理

    shell 操作 dfs 上传[hadoop@namenode ~]$ /data/hadoop/bin/hadoop fs -put /opt/MegaRAID/MegaCli/MegaCli64 ...

  6. (转)nodejs中npm常用命令

    npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...

  7. 利用php比较精确的统计在线人数的办法

    利用php比较精确的统计在线人数的办法,注意这里所说的精确是指个数,如果需要精确在时间上,则需要根据实际情况调整代码中的有效时间.(自己没有写,从别人那拿过来的,先放着然后再研究)<?php// ...

  8. ZooKeeper的Znode剖析

    在ZooKeeper中,节点也称为znode.由于对于程序员来说,对zk的操作主要是对znode的操作,因此,有必要对znode进行深入的了解. ZooKeeper采用了类似文件系统的的数据模型,其节 ...

  9. redis 五种数据类型的使用场景

    String 1.String 常用命令: 除了get.set.incr.decr mget等操作外,Redis还提供了下面一些操作: 获取字符串长度 往字符串append内容 设置和获取字符串的某一 ...

  10. 关于nodejs能同时接受多少个请求的问题?////zzz

    关于nodejs能同时接受多少个请求的问题? 最近学习node,看了很多教程,都在赞扬nodejs的异步I/O,异步I/O的特点就是,每接收一个请求,使用异步调用处理请求,不用等待结果,可以继续运行其 ...