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

如果将这五种不同情况的优先级以数字的形式来表示的话,其对应关系如下:

!important(10000) > 内联样式(1000) > id(100) > class(10) > tag(1)

则通常的css优先级比较可转化为数值大小的比较,如:#list li和.list .content ul li,其优先级为:

100+1=101 > 10+10+1+1=22

前者的优先级大于后者。

css优先级计算的更多相关文章

  1. css优先级计算规则

    原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...

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

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

  3. 关于CSS的优先级,CSS优先级计算,多个class引用

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

  4. css优先级计算规则——权重

    一.css的优先级 当对同一个元素设置相同的多个声明时,会按照优先级的高低选择应用哪种声明. <style> #id{ color:red; } p{ color:blue; } < ...

  5. 【学习笔记】CSS优先级规则

    CSS的优先级规则很多地方的说法都是错误的,常见错误说法是inline css>内部样式>外部样式,其实并没有这种规定.真正的CSS优先级确定是通过特性值大小确定的,在特性值大小相同的情况 ...

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

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

  7. css优先级判断

    概念 浏览器是通过判断优先级,来决定到底哪些属性值是与元素最相关的,从而应用到该元素上.优先级是由选择器组成的匹配规则决定的. 如何计算? 优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不 ...

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

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

  9. css优先级汇总

    原文:css优先级汇总 我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴 ...

随机推荐

  1. windows下安装php笔记

    为了更深入的理解下服务端的配置 ,上篇文章讲了如何在windows下安装apache , 接下来再研究下在windows下安装php并且结合apache运行php环境, 纯属学习用 ^^ ,如果嫌麻烦 ...

  2. 开发ContentProvider的步骤

    开发ContentProvider的步骤如下: 1.编写一个类,该类必须继承自ContentProvider. 2.实现ContentProvider类中的所有抽象方法:insert() delete ...

  3. php的冒泡算法

    <?php /* 冒泡算法  * @para $arr 传人进去排序的数组  * @return $newArr 排序之后的数组  */   function maopao($arr){     ...

  4. CentOS 添加/绑定 IP

    美国VPS的独立IP相对于国内而言,是非常的便宜的.比如有些美国VPS,买5个独立IP才三美元左右一个月.当我们购买了多个独立IP时,如果你不想再联系客服而漫长的等待,那就自己手动配置吧. 一.进入/ ...

  5. Flume笔记--source端监听目录,sink端上传到HDFS

    官方文档参数解释:http://flume.apache.org/FlumeUserGuide.html#hdfs-sink 需要注意:文件格式,fileType=DataStream 默认为Sequ ...

  6. Sicily 1936. Knight Moves

    题目地址:1936. Knight Moves 思路: 这道题一开始不理解题意…orz...囧,看大神们理解的. 题意是说一个8*8的国际象棋,骑士以马的形式走动(“日”字型),指定两个点,输出最小的 ...

  7. ELK( ElasticSearch+ Logstash+ Kibana)分布式日志系统部署文档

    开始在公司实施的小应用,慢慢完善之~~~~~~~~文档制作 了好作运维同事之间的前期普及.. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 软件下载地址: https://www.e ...

  8. C51汇编语言完整源码

    单片机最小系统,两位LED数码管由串口输出接两个164驱动,Lout,Rout为左右声道输出,SET,  ALT0, ALT1为三个按键,也可自己在开始的I/O定义改成你想用的I/O口:12M晶振,若 ...

  9. css属性之transition

    浏览器支持 Internet Explorer 10.Firefox.Opera 和 Chrome 支持 transition 属性. Safari 支持替代的 -webkit-transition ...

  10. 【转】android如何查看cpu的占用率和内存泄漏

    原文网址:http://www.cnblogs.com/yejiurui/p/3472765.html 在分析内存优化的过程中,其中一个最重要的是我们如何查看cpu的占用率和内存的占用率呢,这在一定程 ...