CSS优先级(转)

panshaobinSB

浏览: 203861 次
性别:
来自: 广州

最近访客更多访客>>

ssuubb2711

victor036

吸血鬼骑士zz

heysummer

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java web

http://blog.csdn.net/shirenfeigui/article/details/8625015
我将CSS优先级总结为四个级别的优先，按照从高到低的顺序排列分别是标签离修饰内容近，!important相关，选择器级别，CSS代码位置靠下。在比较的时候从高往低比较。如果在某一优先级层面上已经比较出不同，就不需要继续比较；否则进入下一级的比较。下面详细的描述这四个优先级

第一优先级为标签离修饰内容近。例如<div id="a"><div class="b">内容</div></div>中，b的位置就比a离文字更近，当选择#a和.b的时候，.b的优先级更高

第二优先级为!important相关的优先，顺序为!important用户，!important作者，作者，用户，浏览器。其中用户是阅读网页的人，作者是写网页代码的人，浏览器指浏览器的默认样式。在浏览网页的时候我们可以发现，对于未定义过CSS字体大小的网页，可以通过点击浏览器上面的字体大小改变字体，这就是用户高于浏览器的例子。而定义过CSS字体大小的网页，则无法通过浏览器上面的字体大小改变字体，这就是作者高于用户的例子。

第三为选择器级别的优先。选择器有四种，按照优先级排列为：行内样式(style="")，id选择器(#name{})，class选择器(.name{})，标签选择器(div{})。在进行比较的时候，先比较最高位的数量，如果相同，比较低位的数量，直到得出结果。如果所有位的数量均相同，进入第四优先级的比较。

第四为选择器为CSS代码的位置。加入CSS的方法有四种：
行内样式：<div style="color:red;">
嵌入式：<style type="text/css">p{color:red;)</style>
外部链接式：<link href="sty.css" rel="stylesheet" type="text/css" />
导入式：<style type="text/css">@import url("sty2.css");</style>
在前三级优先级均相同的情况下，它们的位置哪个靠下，哪个优先级高。由于行内样式在第三级优先级最高，所以不可能出现行内样式和其它样式进入第四级pk的情况，因此在第四级的比较中是进行嵌入式，外部链接式，导入式的位置比较。先将外部链接式和导入式的代码排列在文档内，然后就可以比较单条语句的顺序了。
注意：1、语句可以位于页面的任何位置，总是靠下的优先
2、对于一个<style>标签，要么写入嵌入样式，要么写入导入样式。

下面给出一些实例来描述以上四个优先级之间的关系

第一和第二的比较

<style type="text/css">
#a{color:blue!important;}
#b{color:red;}
</style>
<body>
<div id="out"><div id="a"><p id="b">文字</p></div></div>

b离修饰内容更近，虽然a有!important，还是不能覆盖，显示红色

第二和第三的比较

<style type="text/css">
#a{color:blue!important;}
div #a{color:red;}
</style>
<body>
<div id="out"><div id="a"><p id="b">文字</p></div></div>

div #a中有一个标签选择，一个id选择；a中只有一个id选择，但由于使用了!important所以优先级变高，显示蓝色。

第一和第三的比较

<style type="text/css">
#b{color:blue;}
#out #a{color:red;}
</style>
<body>
<div id="out"><div id="a"><p id="b">文字</p></div></div>

虽然下面的id选择符更多，但是b离内容更近，所以是蓝色

第一和第三的比较-行内样式的优先级问题

<style type="text/css">
.c3{color:blue;}
</style>
<body>
<div style="color:red;" id="a" class="c2" ><p id="b" class="c3">文字</p></div>

在外层div使用了行内样式，但CSS选择器选择的是更靠近内容的class，所以是蓝色。如果选择器选择.c2，类选择优先级不如行内选择，就显示为红色

附加内容：内嵌代码修饰的位置

<style type="text/css">
#b{color:blue;}
</style>
<body>
<div id="out"><div id="a"><font color="red"><p id="b">文字</p></font></div></div>

这里虽然有行内样式，但其修饰位置比b更加靠外，所以是蓝色

font修饰的到底是哪个呢？font其实也可以看做一个标签

<style type="text/css">
font{color:blue;}
</style>
<body>
<div id="out"><div id="a"><font color="red"><p id="b">文字</p></font></div></div>

这时候显示为蓝色。而选择#a的时候就会显示红色了。选择#b的时候则显然是蓝色。这说明内嵌标签的修饰位置在它两端的标签之间，而内嵌标签的修饰词汇的优先级比标签选择（参考第三级优先）更弱。

分享到：

classLoader的基本理解 | hibernate.hbm2ddl.auto配置详解

2015-05-04 16:31
浏览 670
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论