css优先级汇总
原文:css优先级汇总
我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题。
多重样式优先级:当内联样式、内部样式和外部样式作用于同一个元素时,属于多重样式的范畴。优先级的顺序为内联样式>内部样式>外部样式。
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
/*.color{color:red;}外部样式*/
<style>/*内部样式*/
.color{color:black;}
<style/>
</head>
<body>
<a href="" class="color" style="color:blue">我爱变色</a>
/*内联样式*/
</body>
/*不出意外的话,应该显示为蓝色,前提是内部样式要放在外部样式的后面*/
选择器的优先权:不同种类的选择器通过权值来计算其优先权的大小。
权值大小:
1.内联样式权值最高为[1000];
2.id选择器权值为[0100];
3.class、属性、伪类选择器权值为[0010];
4.元素标签、伪元素选择器权值为[0001];
5.通用选择器权值为[0000];
解释:权值是一个4位的数字串,从左到右,一级大于一级,每一级之间没有进制,不可跨越。在进行权值比较的时候,应该从左到由进行比较。
<style type="text/css">
.contain .box p{color:red}/*权值:0010+0010+0001=0021*/
.contain div p{color:black}/*权值:0010+0001+0001=0012*/
</style>
<div class="contain">
<div class="box">
<p>颜色</p>
</div>
</div>
/*p标签内容应该为红色*/
CSS 优先级法则:
A 选择器都有一个权值,权值越大越优先;
B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
D 继承的CSS 样式不如后来指定的CSS 样式;
E 在同一组属性设置中标有“!important”规则的优先级最大
<style type="text/css">
div{background: red !important; background: blue}
</style>
/*显示为红色,ie6显示为蓝色,在ie6下,!important跟没用是一样的效果*/
css优先级汇总的更多相关文章
- CSS 技巧汇总
CSS 选择符优先级 !important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)=伪类选择符(:hover )=属性选择符([attr] ) ...
- css选择器及css优先级
三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
- CSS hack 汇总
1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- css 优先级 机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...
- CSS 高级技巧汇总
在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...
- z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...
- CSS基础汇总
1. css的出现是为了是内容和表现分离.分为三种: 内联:不推荐 嵌入:没有利用浏览器缓存机制. 外联: 2. css优先级:①id优先级高于class②后面的样式覆盖前面的③指定的高于继承④行内样 ...
随机推荐
- linux0.11学习笔记(2)
makefile文件: makefile 文件是make 实用简介.make 程序是用Makefile最后一次改变的数据文件和代码文件(last-modification time)确定哪些文件需要更 ...
- Extjs 4.2 右键菜单树节点(,选择逆,废除)
写自己的最新版本号extjs4.2树节点的操作,记录它,可能在将来被用于. var tree = new Ext.tree.TreePanel({ flex: 1, animate: true, au ...
- Ansible@一个有效的配置管理工具--Ansible configure management--翻译(十)
未经书面许可,.请勿转载 Custom Modules Until now we have been working solely with the tools provided to us by A ...
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
- VMware 10设备CentOs 6.5
最近的哥哥再次看到鸟,准备安装CentOs,一看最新的版本号为6.5,这本书5.X的,稍有不同点,二话不说,呵呵~ 矿VMware版本号是10.0.1 build-1379776 首先创建一个新的虚拟 ...
- freemarker定义自己的标记(三)-nested说明
freemarker定义自己的标记 1.nested指令 是可选的,能够在<#macro>和</#macro>之间使用在不论什么位置和随意次数 2.演示样例说明 <#ma ...
- C++11实现模板手柄:委托构造函数、defaultkeyword分析
C++11.使用委托构造函数.和高速变量初始化,defaultkeyword重新声明默认构造函数,回答pod状态. 分析与推荐的方法. 到目前为止,VS2012和2013异常声明兼容还是停留在通信代码 ...
- Linux GPIO 注册和应用
Linux GPIO 注册和应用 Linux Kernel, GPIO, ARM 于Linux kernel代码.经常使用 GPIO 作为一个特殊的信号,如芯片片选信号. GPIO 功能应用,我们经常 ...
- Unity3D的SerializeField 序列化域名
SerializeField Inherits from Attribute Force Unity to serialize a private field. 强制Unity去序列化一个私有域. Y ...
- jQuery中的.height()、.innerHeight()和.outerHeight()
jQuery中的.height()..innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法.对应的宽度获取方法分别为.width()..innerWid ...