1. 前言
在上一篇文章中，我们介绍了内联样式、内部样式表、外部样式表，这三种样式都会影响到网页上的元素。
那么如果三种方式同时作用于同一个元素，元素该按什么规则显示呢。
这就涉及到CSS选择器优先级问题，本篇就此进行介绍。
2. 就近原则
网页元素在应用样式代码时，遵循就近原则，也是就是，谁跟网页元素关系近，就用谁的规则。
所以，内联样式直接就在元素标签上，优先级最高；内部样式表就在本王爷内，优先级次之；外部样式表单独文件存储，优先级最低。
3. 实例验证
我们通过一个实例来验证下：
首先编写外部样式文件style.css，代码如下：
.out-style {
color: red;
}
然后编写网页，并引用外部样式文件，且定义内部样式表：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引用外部样式表 -->
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.in-style {
color: green;
}
</style>
</head>
<body>
<div class="out-style in-style">
好好学习
</div>
<div class="out-style in-style" style="color:blue">
天天向上
</div>
</body>
</html>
对于“好好学习”部分，同时应用了外部样式表的out-style和内部样式表的in-style，因为内部样式表优先级高，所以会显示绿色字体。
对于“天天向上”部分，同时应用了外部样式表、内部样式表的样式，而且还编写了内联的样式，因为内联的优先级最高，所以会显示蓝色字体。
最终效果如下：
4. 小结
当我们引用别人编写的样式文件后，如果对效果不满意，可以利用优先级规则，编写我们自己想要的CSS代码。
如果我们自己编写的CSS代码优先级更高，就能覆盖引用样式文件的效果，从而实现我们自己的目标。