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. php二分查找

    // 递归版本 function bin_sch($arr,$low,$high,$val) { if($low<$high){ $mid = intval(($low+$high)/2); i ...

  2. Nutch + solr 这个配合不错哦

    因为朋友需要,所以把这个开源组合放在一起试用了下,正在弄,先Mark下. 用的是Nutch1.9,这个比较新,资料比较少,基本上就是用原来的英文WIKI. 首先要注意的是,不要试着在windows下做 ...

  3. QCoreApplication::processEvents();的作用与TApplication::ProcessMessages的作用完全相同,但是没想到这种用法还有缺点

    手动事件处理 最基本的解决方案是明确要求Qt在计算的某些时刻处理等待事件.要做到这一点,必须定期调用QCoreApplication::processEvents(). 下面的例子显示如何做到这一点: ...

  4. X windows的底层实现机制

    Qt在Linux上运行崩溃了,很可能的原因是对于X11机制的不了解.很可能是UI代码里面对窗口的操作不规范而导致Qt内部的BUG暴露出来.具体UI实现代码我也没有看.是别人维护的.打算今天去看下代码, ...

  5. perl 爬取数据<1>

    use LWP::UserAgent; use POSIX; use DBI; $user="root"; $passwd="11111111"; $dbh=& ...

  6. 【转】【经典算法】——KMP,深入讲解next数组的求解

    前言 之前对kmp算法虽然了解它的原理,即求出P0···Pi的最大相同前后缀长度k:但是问题在于如何求出这个最大前后缀长度呢?我觉得网上很多帖子都说的不是很清楚,总感觉没有把那层纸戳破,后来翻看算法导 ...

  7. Ueditor文本编辑器(新浪SAE平台版本) - 下载频道 - CSDN.NET

    Ueditor文本编辑器(新浪SAE平台版本) - 下载频道 - CSDN.NET Ueditor文本编辑器(新浪SAE平台版本)

  8. http的无状态无连接到底是什么含义

    无连接:服务器处理完客户的请求,并收到客户的应答后,即断开连接. 早期这么做的原因是 HTTP协议产生于互联网,因此服务器需要处理同时面向全世界数十万.上百万客户端的网页访问,但每个客户端(即浏览器) ...

  9. 为什么Myeclipse 提示Project 'bankmanager' is missing required library,myeclipse项目上红叉 但内部红叉

    应该是正在使用的项目是从网上下的或者别人那里直接拷贝导致的,解决办法: 下一个mysql-connector-java-5.1.22-bin.jar或者是最新版,最好放项目目录里 右键点项目,Buil ...

  10. html&CSS初学

    <link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" ty ...