css优先级问题
关于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优先级问题的更多相关文章
- css选择器及css优先级
三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- css 优先级 机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...
- z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...
- css优先级和层叠
css优先级和层叠 1.优先级 计算方法: a.行内样式 b.id选择器的数量 c.类,伪类和属性选择器的数量 d.标签选择器和伪元素选择 ...
- 使用background和background-image对CSS优先级造成影响
在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- CSS优先级算法是如何计算?
CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...
- CSS优先级总结(转载)
样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...
- css优先级计算
主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同 ...
- css 优先级
css优先级的四大原则: 原则一: 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高.例子1:CODE:<style type="text/css"> &l ...
随机推荐
- 【vue.js权威指南】读书笔记(第一章)
最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...
- 通过Request.Form获取同name的checkbox所有值
转自:http://www.cnblogs.com/Fred_Xu/archive/2013/01/16/how-to-get-the-checkbox-value-from-a-dynamicall ...
- 2003-can't connect to mysql server on 'localhost'(10061) MySQL错误
开始遇到这个问题,我以为是服务没链接,在网上查了下错误,但没解决,后来链接了下端口,结果发现我原来我 端口不对,MySQL端口默认是3306我安装时端口是设的3307.希望能帮到遇到这种问题的人
- GCD的简单用法
/* 创建一个队列用来执行任务,TA属于系统预定义的并行队列即全局队列,目前系统预定义了四个不同运行优先级的全局队列,我们可以通过dispatch_get_global_queue来获取它们 四种优先 ...
- docker 服务升级
使用docker大家一般都是微服务部署了.个人的经验是乖乖的用docker自己的注册发现机制. 创建一个overlay类型的network.把所有的微服务加入进去.就可以把service name当作 ...
- yii框架的安装
在安装YII2.0首先我们需要下载一个composer,何为composer,简单解释为PHP的组件工具, Composer是PHP中用来管理依赖(dependency)关系的工具,你可以在自己的项目 ...
- android studio ndk配置和ndk开发
配置开发环境: 1:下载ndk,导入android studio中. 2:在项目中引入NDK 3:在计算机path变量中导入NDK路径,在编译.h文件的时候会用到. 一:建立java的native ...
- 。。。IO流的学习之一。。。
文件写入流FileWriter的使用: import static org.junit.Assert.*; import java.io.File; import java.io.FileWriter ...
- Windows Phone 十三、吐司通知
弹出通知对话框 <Grid> <Button Content="弹出通知" Click="Button_Click"/> </Gr ...
- 亲手使用Sencha Touch + phonepag开发Web APP随笔 -- 第一个APP
参考博文: [Phonegap+Sencha Touch] 移动开发1.准备工作 [Phonegap+Sencha Touch] 移动开发2.PhoneGap/Cordova初步使用 经过差不多1 ...