CSS各种方式的优先级问题 - 宁波智森网络公司

森派发布的之前4个小节分别介绍了CSS控制页面的4种不同方法，CSS优先级都有其自身的特点。这4种方法如果同时运用到同一个HTML文件的同一个标记上，将会出现优先级的问题。如果在各种方法中设置的属性不一样，例如内嵌式设置字体为宋体，链接式设置颜色为红色，那么现实结果会二者同时生效，为宋体红色字。但当各种方法同时设置一个属性时，例如都设置字体的颜色，情况就会比较复杂。
如：首先创建文件3.css，如下：
H3 {
Padding-top:50px;
}
然后创建文件2.css
H3{
Color:#00FFFF;
Font-style:italic;
Font-size:40px;
}
再创建一个HTML文件：
<html>
<head>
<title>样式优先级问题</title>
<style type="text/css">
@import url(2.css);
H3{
Background-color:#000000;
}
</style>
<link href="3.css" type="text/css" rel="stylesheet">
</head>
<body>
<h3 style="text-decoration:underline"></h3>
</body>
</html>

行内样式设置文字下划线、内嵌样式设置背景颜色为黑色，链接样式3.css设置文字顶端空50px的距离，链接样式2.css则设置文字为青色、斜体、大小40px。这4种样式互不影响，各自都实现了应有的效果。

但如果这4种样式同时设置字体颜色，而且分别设置不同的颜色，就存在优先级的问题。在上例的基础上修改，如：
Color:#FFFF00

保持2.css不变，将以上这句代码加入3.css中，即将3.css修改为:
H3
{
Padding-top:50px;
Color:#FFFF00;
}
可以看到文字变成了黄色。如果加入代码的地方不是3.css，而是内嵌的<style>与</style>之间,也会发现文字变成了黄色。同样的，如果修改行内样式的style语句，加入代码"color:#FFFF00;",文字也会相应变色。可见在4种css样式中，@import导入样式表的优先级最低。

用同样的方法，可以判断出行内样式的优先级最高，其次是采用<link>标记的链接式,再次是位于<style>和</style>之间的内嵌式，最后才是上面提到的@import 导入式。
附注：
虽然各种CSS样式加入页面的方式有先后的优先级，但是建设网站时，最好只使用其中的1-2种，这样既有利于后期的维护和管理，也不会出现各种样式"撞车"的情况，便于设计者理顺设计的整体思路。