首先了解下CSS的三种样式类型：外部样式、内部样式以及内联样式。
外部样式：
外部样式与HTML代码分离，单独存放在.css文件中。使用时通过link标签将此文件引入到页面中，引入的格式为：<link type="text/css" rel="stylesheet" href=".css文件的地址"/>
内部样式：
内部样式使用<style>标签将CSS代码包裹起来，并放入<head>标签中(一般存放在head中，也可存放于别处，如body中)，格式为：<style type="text/css"> span{color: red;} </style>
内联样式：
内联样式定义在dom元素的style属性中，格式为：<div style="background-color: red;"> hello </div>
以上三种样式类型的优先级为：
内联样式 > 内部样式 > 外部样式
但这个优先级并不是绝对的，因为还存在着选择器的优先级以及!important一说。下面先介绍下选择器的优先级：
上图所表达的意思为：内联样式style属性的权值为1000，id选择器的权值为100，类、伪类、属性选择器的权值为10，标签选择器的权值为1。(权值越大，优先级越高)
结合选择器的优先级，重新去看上面所提到的三种CSS样式类型的优先级，我们可以对这个优先级排序做如下解释：
1. 内联样式的优先级最高，是因为style标签的权值高。
2. 内部样式的优先级高于外部样式，是因为我们普遍将内部样式定义在外部样式之后。这样对于相同权重的样式，后面的会覆盖掉前面的(也可以理解为越靠近dom元素的样式，优先级相对越高)，所以最终呈现出来的是内部样式的优先级更高。我们下面做个测试，将内部样式定义在外部样式之前，看看效果如何：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<script src="Useful/jq.js"></script>
<style type="text/css">
#span1{
color: red;
}
</style>
<link type="text/css" rel="stylesheet" href="Useful/testPage.css"/>
<!-- testPage.css内容为：#span1{color: yellow;} -->
</head>
<body>
<span id="span1"> 我是span </span>
</body>
</html>
很显然，最终显示出来的是外部样式中定义的颜色。这就印证了内部样式和外部样式本身并没有优先级高低之分，最终的优先级是由选择器优先级和顺序所决定的。换一种方式理解：外部样式被link引入进页面后，所呈现出的形式类似于内部样式，他们是平等的。这时候决定最终样式的就是选择器和顺序了。
下面再讲下!important：
从字面意思也可以看出，!important修饰的样式具有最高的优先级，不论是定义在内部、外部还是内联样式中，它的优先级都是最高的。
如果有两处及以上的地方都对同一个元素定义了!important样式，那么最终的优先级还要结合选择器和顺序来决定。举个例子：
#span1{
color: yellow !important;
}
span{
color: red !important;
}
扫一扫
3278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
