原文: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. Net 项目代码风格

    .Net 项目代码风格要求   .Net 项目代码风格要求 PDF版下载:项目代码风格要求V1.0.pdf 代码风格没有正确与否,重要的是整齐划一,这是我拟的一份<.Net 项目代码风格要求&g ...

  2. iOS 生成随机颜色（UIColor）

    #import <UIKit/UIKit.h> @interface UIColor (RandomColor) +(UIColor *) randomColor; @end #impor ...

  3. webserver实现

    最近的工作需求client和server使用https协议进行通讯,我负责client编写程序,在操作系统的-depth理解认为一旦前webserver实现,整理代码: #include"a ...

  4. Cocos2d-x 脚本语言Lua使用

    Cocos2d-x 脚本语言Lua使用 前面几篇博客已经把Lua的相关基础知识介绍了.本篇博客就来介绍一下,怎样在Cocos2d-x项目中使用Lua这门脚本语言进行开发.因为笔者使用的时Mac系统.所 ...

  5. opengl 扳回一球

    本文介绍了使用两种方法opengl画一个球体,一个是一个球形点位置计算,然后绘制出,还有一个glut套件自带功能. 一.直接绘制法 直接贴代码,解释都写在凝视里了.绘制时先移动好坐标系.然后调用这方法 ...

  6. Centos7系统配置上的变化（二）网络管理基础

    原文 Centos7系统配置上的变化(二)网络管理基础 上篇简单介绍了CentOS 7 在服务和网络方面的一点变化,先前很多烂熟于心的操作指令已经不适用了,不管是否习惯,总要接受.熟悉这些变化. 写上 ...

  7. springMVC3得知(五岁以下儿童)--MultiActionController

    Spring为了提供一个多动作控制器,您可以使用它的几个行动统一到一个控制器,这可以放在一起功能. 多动作控制器存在在一个单独的包中--org.springframework.web.mvc.mult ...

  8. 贪心算法(Greedy Algorithm)最小生成树 克鲁斯卡尔算法(Kruskal&#39;s algorithm)

    克鲁斯卡尔算法(Kruskal's algorithm)它既是古典最低的一个简单的了解生成树算法. 这充分反映了这一点贪心算法的精髓.该方法可以通常的图被表示.图选择这里借用Wikipedia在.非常 ...

  9. Eclipse UML小工具AmaterasUML的配置和使用

    AmaterasUML是个人认为最好用的Eclipse UML插件,能够通过拖拽Java源文件,轻松生成类图结构.同一时候支持活动图.时序图和用例图. 它的官方下载地址是:http://sourcef ...

  10. 经典算法题每日演练——第十六题 Kruskal算法

    原文:经典算法题每日演练--第十六题 Kruskal算法 这篇我们看看第二种生成树的Kruskal算法,这个算法的魅力在于我们可以打一下算法和数据结构的组合拳,很有意思的. 一:思想 若存在M={0, ...