CSS 各种方式的优先级有关问题
日期：2014-05-17 浏览次数：20639 次
CSS 各种方式的优先级问题
上面的4个小节分别介绍了CSS控制页面的4种不同方法，各种方法都有其自身的特点。这4种方法如果同时运用到同一个HTML文件的同一个标记上，就会出现优先级的问题。如果在各种方法中设置的属性不一样，例如内嵌式设置字体为宋体，行内式设置颜色为红色，那么显示结果会让二者同时生效，为宋体红色字。但当各种方法同时设置一个属性时，例如都设置字体的颜色，情况就会比较复杂，如下所示。
首先创建两个CSS文件，其中第一个命名为red.css，其内容为：
第2个命名为green.css，其内容为：
这两个CSS的作用分别将文本段落文字的颜色设置为红色和绿色，接着创建一个HTML文件，代码如下：
从代码中可以看到，在内嵌式的样式规则中，将p段落文字的颜色设置为蓝色，而行内样式又将p段落文字的颜色设置为灰色。此外，通过导入的方式引入了red.css，这将文字颜色设置为红色，那么这时这个段落文字到底会显示为什么颜色呢？在浏览器中的效果如下图所示。
![]()
可以看到，结果是灰色，即以行内样式为准的。接下来，将行内样式代码删除，再次在浏览器观察，可以看到效果如下图所示。
![]()
可以看到，结果是蓝色，即以嵌入样式为准。接着把嵌入的代码删除，仅保留导入的命令，这时在浏览器中将看到红色的文字。从而说明，在行内、嵌入和导入这3种方式之间的优先级关系是：
接下来，在代码中增加链接方式引入的CSS文件，分别尝试如下两种情况。
情况1：
情况2：
这两种情况的区别在于哪种方式的样式表放在前面。经过尝试可以发现，谁放在后面就以谁为准。
因此，结合前面的结论，如果我们把导入式和链接式统称为外部样式，那么优先级规则应该写为：
（1）行内式 > 嵌入式 > 外部样式；
（2）外部样式中，出现在后面的优先级高于出现在前面的。
此次，这个规则已经比较完善了，然而还没有结束。现在如果将<head>部分的代码为：
将导入式的命令和嵌入式的样式放在两个<style>中，这时在浏览器中的效果，文字会显示为红色，这就说明这时将不再遵循嵌入式优先于导入式的规则了。再例如对于如下代码：
这说明优先级最高的是最后面的导入式，其次是链接式，最后才是嵌入式。因此，如果在<head>中存在多个<style>标记，那么这些<style>标记和链接式之间将由先后顺序决定优先级，而在同一个<style>内部，才会遵循嵌入式优先于导入式的规则。
虽然各种CSS样式加入页面的方式有先后的优先级，但在建设网站时，最好只使用其中的1-2种，这样既有利于后期的维护和管理，也不会出现各种样式“冲突”的情况，便于设计者理顺设计的整体思路。
转载地址：http://www.xuekaifa.com/article/20110210/000417.html
上面的4个小节分别介绍了CSS控制页面的4种不同方法，各种方法都有其自身的特点。这4种方法如果同时运用到同一个HTML文件的同一个标记上，就会出现优先级的问题。如果在各种方法中设置的属性不一样，例如内嵌式设置字体为宋体，行内式设置颜色为红色，那么显示结果会让二者同时生效，为宋体红色字。但当各种方法同时设置一个属性时，例如都设置字体的颜色，情况就会比较复杂，如下所示。
首先创建两个CSS文件，其中第一个命名为red.css，其内容为：
p {
color:red;
}第2个命名为green.css，其内容为：
p {
color:green;
}这两个CSS的作用分别将文本段落文字的颜色设置为红色和绿色，接着创建一个HTML文件，代码如下：
<html>
<head>
<title>页面标题</title>
<style type="text/css">
p{
color:blue;
}
@import url(red.css);
</style>
</head>
<body>
<p style="color:gray;">观察文字的颜色</p>
</body>
</html>从代码中可以看到，在内嵌式的样式规则中，将p段落文字的颜色设置为蓝色，而行内样式又将p段落文字的颜色设置为灰色。此外，通过导入的方式引入了red.css，这将文字颜色设置为红色，那么这时这个段落文字到底会显示为什么颜色呢？在浏览器中的效果如下图所示。
可以看到，结果是灰色，即以行内样式为准的。接下来，将行内样式代码删除，再次在浏览器观察，可以看到效果如下图所示。
可以看到，结果是蓝色，即以嵌入样式为准。接着把嵌入的代码删除，仅保留导入的命令，这时在浏览器中将看到红色的文字。从而说明，在行内、嵌入和导入这3种方式之间的优先级关系是：
行内式 > 嵌入式 > 导入式
接下来，在代码中增加链接方式引入的CSS文件，分别尝试如下两种情况。
情况1：
<head> <style type="text/css"> @import url(red.css); </style> <link href="green.css" type="text/css" rel="stylesheet"> </head>
情况2：
<head> <link href="green.css" type="text/css" rel="stylesheet"> <style type="text/css"> @import url(red.css); </style> </head>
这两种情况的区别在于哪种方式的样式表放在前面。经过尝试可以发现，谁放在后面就以谁为准。
因此，结合前面的结论，如果我们把导入式和链接式统称为外部样式，那么优先级规则应该写为：
（1）行内式 > 嵌入式 > 外部样式；
（2）外部样式中，出现在后面的优先级高于出现在前面的。
此次，这个规则已经比较完善了，然而还没有结束。现在如果将<head>部分的代码为：
<head>
<style type="text/css">
p {color:blue;}
</style>
<style type="text/css">
@import url(red.css);
</style>
</head>将导入式的命令和嵌入式的样式放在两个<style>中，这时在浏览器中的效果，文字会显示为红色，这就说明这时将不再遵循嵌入式优先于导入式的规则了。再例如对于如下代码：
<head>
<style type="text/css">
p {color:blue;}
</style>
<link href="green.css" type="text/css" rel="stylesheet">
<style type="text/css">
@import url(red.css);
</style>
</head>这说明优先级最高的是最后面的导入式，其次是链接式，最后才是嵌入式。因此，如果在<head>中存在多个<style>标记，那么这些<style>标记和链接式之间将由先后顺序决定优先级，而在同一个<style>内部，才会遵循嵌入式优先于导入式的规则。
虽然各种CSS样式加入页面的方式有先后的优先级，但在建设网站时，最好只使用其中的1-2种，这样既有利于后期的维护和管理，也不会出现各种样式“冲突”的情况，便于设计者理顺设计的整体思路。
转载地址：http://www.xuekaifa.com/article/20110210/000417.html
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
