在HTML文件中引入CSS樣式有三種方法：
外部樣式：通過link標簽引入CSS樣式；
內頁樣式：寫在HTML頁面裡面的style標簽裡面；
行內樣式：寫在對應標簽的style屬性裡面。
我知道一般情況下使用外部樣式，減少代碼冗余，同時便於後期維護。但如果同時用三種方式引入相同的CSS樣式，誰的優先級更高呢？
就做了個小測試：
<!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三種位置寫法的優先級是：行內樣式＞內頁樣式＞外部樣式