在HTML文件中引入CSS样式有三种方法：
外部样式：通过link标签引入CSS样式；
内页样式：写在HTML页面里面的style标签里面；
行内样式：写在对应标签的style属性里面。
我知道一般情况下使用外部样式，减少代码冗余，同时便于后期维护。但如果同时用三种方式引入相同的CSS样式，谁的优先级更高呢？
有个简单的计算方法
- 内联样式表的权值为 1000
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
如下测试：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>css样式优先级</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.box{
background:red;
border:1px solid black;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div style="background:yellow;width:100px;height:100px;" class="box">
</div>
</body>
</html>
外部CSS样式代码：
.box{
width:100px;
height:100px;
background:blue;
}
外部样式：blue
内页样式：red
行内样式：yellow
最后显示的效果是：
把行内CSS的背景样式去掉后，显示：
可见，CSS三种位置写法的优先级是：行内样式＞内页样式＞外部样式