关于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. mysql 实战 or、in与union all 的查询效率

    OR.in和union all 查询效率到底哪个快. 网上很多的声音都是说union all 快于 or.in,因为or.in会导致全表扫描,他们给出了很多的实例. 但真的union all真的快于o ...

  2. css给div添加0.5px的边框

    具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. Programming paradigms

    https://en.wikipedia.org/wiki/Aspect-oriented_programming Action Agent-oriented Array-oriented Autom ...

  4. ubuntu安装使用latex和texmaker--PC端

    参考文档 据说中文文献可能不识别,可能用到的参考资料

  5. Altium Designer 常用的快捷键

    ctrl+r                      复制并重复黏贴 ctrl+shift+v             只能黏贴 shift+c                    取消选择 sp ...

  6. 如何创建一个简单的C++同步锁框架(译)

    翻译自codeproject上面的一篇文章,题目是:如何创建一个简单的c++同步锁框架 目录 介绍 背景 临界区 & 互斥 & 信号 临界区 互斥 信号 更多信息 建立锁框架的目的 B ...

  7. [Android] ListView关于adapter多种view设置

    使用的关键点是在adapter覆盖两个方法 public int getItemViewType(int position) public int getViewTypeCount() 其它的可另go ...

  8. 查看SQL语句在SQL Server上的执行时间

    set statistics profile onset statistics io onset statistics time ongo--begin <这里写上你的语句...>  se ...

  9. VS2015解决非Unicode编码包含中文字段无法编译的问题

    用VS2015打开并编译,定位到编译错误的文件(.cs而不是可视化编辑视图) 文件--高级保存选项--编码 改为 Unicode-代码页1200 这样不论用VS2015/2013/2012/2010 ...

  10. PHP开发环境配置~Windows 7 IIS

    1.配置IIS添加角色服务:CGI.ISAPI扩展.ISAPI筛选器 2.下载PHP安装包 http://windows.php.net/download/ 3.添加模块映射 4.配置php.ini ...