原文: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优先级汇总的更多相关文章

  1. CSS 技巧汇总

    CSS 选择符优先级 !important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)＝伪类选择符(:hover )＝属性选择符([attr] ) ...

  2. css选择器及css优先级

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

  3. 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  4. CSS hack 汇总

    1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...

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

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

  6. css 优先级 机制

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

  7. CSS 高级技巧汇总

    在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...

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

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

  9. CSS基础汇总

    1. css的出现是为了是内容和表现分离.分为三种: 内联:不推荐 嵌入:没有利用浏览器缓存机制. 外联: 2. css优先级:①id优先级高于class②后面的样式覆盖前面的③指定的高于继承④行内样 ...

随机推荐

  1. linux0.11学习笔记（2）

    makefile文件: makefile 文件是make 实用简介.make 程序是用Makefile最后一次改变的数据文件和代码文件(last-modification time)确定哪些文件需要更 ...

  2. Extjs 4.2 右键菜单树节点（，选择逆，废除)

    写自己的最新版本号extjs4.2树节点的操作,记录它,可能在将来被用于. var tree = new Ext.tree.TreePanel({ flex: 1, animate: true, au ...

  3. Ansible@一个有效的配置管理工具--Ansible configure management--翻译（十）

    未经书面许可,.请勿转载 Custom Modules Until now we have been working solely with the tools provided to us by A ...

  4. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  5. VMware 10设备CentOs 6.5

    最近的哥哥再次看到鸟,准备安装CentOs,一看最新的版本号为6.5,这本书5.X的,稍有不同点,二话不说,呵呵~ 矿VMware版本号是10.0.1 build-1379776 首先创建一个新的虚拟 ...

  6. freemarker定义自己的标记（三）-nested说明

    freemarker定义自己的标记 1.nested指令 是可选的,能够在<#macro>和</#macro>之间使用在不论什么位置和随意次数 2.演示样例说明 <#ma ...

  7. C++11实现模板手柄：委托构造函数、defaultkeyword分析

    C++11.使用委托构造函数.和高速变量初始化,defaultkeyword重新声明默认构造函数,回答pod状态. 分析与推荐的方法. 到目前为止,VS2012和2013异常声明兼容还是停留在通信代码 ...

  8. Linux GPIO 注册和应用

    Linux GPIO 注册和应用 Linux Kernel, GPIO, ARM 于Linux kernel代码.经常使用 GPIO 作为一个特殊的信号,如芯片片选信号. GPIO 功能应用,我们经常 ...

  9. Unity3D的SerializeField 序列化域名

    SerializeField Inherits from Attribute Force Unity to serialize a private field. 强制Unity去序列化一个私有域. Y ...

  10. jQuery中的.height()、.innerHeight()和.outerHeight()

    jQuery中的.height()..innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法.对应的宽度获取方法分别为.width()..innerWid ...