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

  1. css选择器及css优先级

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

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

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

  3. css 优先级 机制

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

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

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

  5. css优先级和层叠

    css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择 ...

  6. 使用background和background-image对CSS优先级造成影响

    在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  7. CSS优先级算法是如何计算?

    CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...

  8. CSS优先级总结(转载)

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

  9. css优先级计算

    主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同 ...

随机推荐

  1. [l转]VLM_on_Linux

    Instructions for running the Symbolics VLM virtual machine on Linux. VLM On Linux From LispMachinery ...

  2. Android IntentService 与Alarm开启任务关闭任务

    1:MyService public class MyService extends IntentService{ AlarmManager alarmManager = null; PendingI ...

  3. Android DatePickerDialog 只选择年月

    //对EditText注册OnTouch事件etSscxNssbDate.setOnTouchListener(selectDateTouchListener); //选择日期 private OnT ...

  4. Gas Station 解答

    Problem There are N gas stations along a circular route, where the amount of gas at station i is gas ...

  5. OpenStack Keystone v3 API新特性

    原连接 http://blog.chinaunix.net/uid-21335514-id-3497996.html keystone的v3 API与v2.0相比有很大的不同,从API的请求格式到re ...

  6. java值传递

    Java使用按值传递的函数调用方式,这往往使我感到迷惑.因为在基础数据类型和对象的传递上,我就会纠结于到底是按值传递,还是按引用传递.其实经过学习,Java在任何地方,都一直发挥着按值传递的本色. 首 ...

  7. swift通过摄像头读取每一帧的图片,并且做识别做人脸识别

    最近帮别人做一个项目,主要是使用摄像头做人脸识别 github地址:https://github.com/qugang/AVCaptureVideoTemplate 要使用IOS的摄像头,需要使用AV ...

  8. 【输入输出挂】【Uva11462】Age Sort

    例题17  年龄排序(Age Sort, UVa 11462)照从小到大的顺序输出. [输入格式] 输入包含多组测试数据.每组数据的第一行为整数n(0<n≤2 000 000),即居民总数:下一 ...

  9. 关于asp.net简单的下载问题

    关于asp.net的下载,只需将打开相应的文件路径就能在浏览器上实现下载功能,比如项目的同级目录上有一个文件 苍老师.zip<a href="苍老师.zip">< ...

  10. java中String的用法

    String的用法很活跃,也用到的很多.可以根据自己的需要查询API.这里只有concat和substring,indexof的用法 class TestString { public static ...