css 优先级
css优先级的四大原则:
原则一: 继承不如指定
如果某样式是继承来的永远不如具体指定的优先级高。
例子1:
CODE:
<style type="text/css">
<!--
*{font-size:20px}
.class3{ font-size: 12px; }
-->
</style>
<span class="class3">我是多大字号?</span>
运行结果:.class3{ font-size: 12px; }
例子2:
CODE:
<style type="text/css">
<!--
#id1 #id2{font-size:20px}
.class3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div>
运行结果:.class3{ font-size: 12px; }
注意:后面的几大原则都是建立在“指定”的基础上的。
原则二: #ID > .class > 标签选择符
例子:
CODE:
<style type="text/css">
<!--
#id3 { font-size: 25px; }
.class3{ font-size: 18px; }
span{font-size:12px}
-->
</style>
<span id="id3" class="class3">我是多大字号?</span>
运行结果:#id3 { font-size: 25px; }
原则三:越具体越强大。
解释:当对某个元素的CSS选择符样式定义的越具体,层级越明确,该定义的优先级就越高。
CODE:
<style type="text/css">
<!--
.class1 .class2 .class3{font-size: 25px;}
.class2 .class3{font-size:18px}
.class3 { font-size: 12px; }
-->
</style>
<div class="class1">
<p class="class2"> <span class="class3">我是多大字号?</span> </p>
</div>
运行结果:.class1 .class2 .class3{font-size: 25px;}
原则四:标签#id >#id ; 标签.class > .class
上面这条原则大家应该也都知道,看例子
CODE:
<style type="text/css">
<!--
span#id3{font-size:18px}
#id3{font-size:12px}
span.class3{font-size:18px}
.class3{font-size:12px}
-->
</style>
<span id="id3">我是多大字号?</span>
<span class="class3">我是多大字号?</span>
运行结果:span#id3{font-size:18px} | span.class3{font-size:18px}
很多人会有这样的疑问,为什么不把这个原则四归入原则一形成:
【 标签#ID > #ID > 标签.class > .class > 标签选择符 > 通配符 】 呢?或者将 “标签.class” 看作多更为具体的 “.class” 从而归入原则二呢?后面我将解答各位的疑惑,这就涉及到CSS的解析规律---------这四大原则间也是有优先级的,是不是有些糊涂了?别急,继续看。
*四大原则的权重
相信很多人都知道上面的四大原则,不要以为知道了这四大原则就能分辨css中那条代码是起作用的,不信?那你5秒内能肯定的知道下面这段代码,测试中的文字的字号吗?
CODE:
<style type="text/css">
<!--
.class1 p#id2 .class3{font-size:25px}
div .class2 span#id3{font-size:18px}
#id1 .class3{font-size:14px}
.class1 #id2 .class3{font-size:12px}
#id1 #id2{font-size:10px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div>
为了大家方便阅读,我去掉了一些代码。
四大原则的权重就是: 原则一 > 原则二 > 原则三 > 原则四
解释:
首先遵循原则一
有指定开始使用下面的原则,无指定则继承离他最近的定义。
然后开始原则二
1、比较最高优先级的选择符
例子:
CODE:
<style type="text/css">
<!--
#id3{font-size:18px}
.class1 .class2 .class3{font-size:12px} /* 描述的再具体也不起作用 --- 原则二 */
.class3{font-size:18px}
div p span{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div>
运行结果:#id3{font-size:18px}
删掉上面CSS中的前两行可以得出,如果没有最高级别的#ID会寻找.class 即使后面的CSS按照“原则二” 描述的再具体也无法突破原则一。
2、如果两条CSS的如果最高选择符优先级一样,则比较他们的数量
例子:
CODE:
<style type="text/css">
<!--
.class1 #id3{font-size:12px}
.class1 .class2 #id3{font-size:14px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div>
运行结果:.class1 .class2 #id3{font-size:14px}
3、如果最高选择符级别和数量都一样,则按照原则二比较他们下一级,以此类推。
例子1:
CODE:
<style type="text/css">
<!--
#id1 .class2 .class3{font-size:14px}
div .class2 #id3{font-size:12px
}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
运行结果:#id1 .class2 .class3{font-size:14px}
*最高级选择符的位置没有高下之分,论证:
<?php CODE:
<style type="text/css">
<!--
#id1 .class2 .class3{font-size:18px}
.class1 #id2 .class3{font-size:14px}
.class1 .class2 #id3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div> 上例中更换3条CSS的先后可以得出,哪条位于最后,哪条起作用。说明他们的级别一样,后面的将覆盖前面的。 *将原则四归入原则二的不合理性,论证:
CODE:
<style type="text/css">
<!--
.class1 span#id3{font-size:14px}
#id1 .class2 .class3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div> #id1 .class2 .class3{font-size:12px} 可以看到span#id3并不比#id1高出一个级别。 无结果开始原则三
如果比较结果,选择符从最高级开始都对应,级别上的数量也相同,则开始比较谁更具体。
例子:
CODE:
<style type="text/css">
<!--
#id1 .class2 span{font-size:14px}
.class1 #id3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div> #id1 .class2 span{font-size:14px} 当然也可以理解为在原则二层层比较中“少一个层级的样式”,缺少的那个层级没有“层级较多的样式”多出的那个层级的级别高。(绕口令) *将原则四归入原则三的不合理性,论证: CODE:
<style type="text/css">
<!--
.class2 .class3{font-size:14px}
span.class3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div> 上例中可以看出,如果将原则四并入原则三,将span.class3看作两层,那么应该和.class2 .class3层级一样多,那么应该显示12px,而事实不是这样。 最终对决原则四
如果还分不出结果,则开始原则四的比较:
例子1:
CODE:
<style type="text/css">
<!--
.class1 p.class2 .class3{font-size:14px}
.class1 .class2 .class3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号?</span> </p>
</div> .class1 p.class2 .class3{font-size:14px}
更多:
http://developer.51cto.com/art/201009/226852.htm
http://www.blueidea.com/tech/web/2009/6801.asp
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的优先级有关系. 如果将这五种不同 ...
随机推荐
- T-SQL 语法元素
一.标识符 在T-SQL语言中,对SQLServer数据库及其数据对象(比如表.索引.视图.存储过程.触发器等)需要以名称来进行命名并加以区分,这些名称就称为标识符. 通常情况下,SQLServer数 ...
- javascript调试
今天,发现了一个之前从未注意的角落,相信能够大大提高自己写JS的速度.能够迅速发现错误. 例如,今天的加班中调试一个js错误发现的一个例子. 1.Google浏览器报的错 以上是google浏览器报的 ...
- vmware 网络连接
解决VMware nat service等服务不能启动 虚拟机如何设置网络连接来上网?
- jQuery多版本的使用,同一文件多个版本引用
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 【转】如何查看linux版本 如何查看LINUX是多少位
原文网址:http://sopace.blog.51cto.com/1227753/670526 如何得知自己正在使用的linux是什么版本呢,下面的几种方法将给你带来答案! 1. 查看内核版本命令: ...
- php header调试,yii2打log
1 通过header来强制刷新view:在页面最开始添加 <?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); h ...
- Handshakes(思维) 2016(暴力)
Handshakes Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu Submit Sta ...
- 【Android】使用FrameLayout布局实现霓虹灯效果
FrameLayout是五大布局中最简单的一个布局. 在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置. 它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的 ...
- Android漫游记(1)---内存映射镜像(memory maps)
Android系统内核基于Linux2.6+内核,因此,其在进程内存管理方面的非常多机制和Linux是非常相像的.首先,让我们来看一个典型的Android进程的内存镜像(App进程和Native本地进 ...
- ueditor+asp.net异步提交,可以实现了,嘿嘿
之前没用过Ueditor去异步提交,最近项目需要用到这个,就下了个来用,结果可能没仔细去看Ueditor的相关介绍文档,然后自己也郁闷了一下才把它弄出来,现在可以实现异步提交了,松口气,把代码贴出来, ...