今天去长虹面试，面试官问了一个问题，就是给一个div在三个地方设置不同的background，最后div显示的颜色是哪一个？
当时我第一次回答的是最后一个，但是后来又改口说是第一个，回来一验证，证明自己错了，今天就总结一下CSS样式的作用域问题吧。
首先对HTML引入样式的优先级排序，数字越大优先级越高
#### 样式优先级
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）
---
#### 外部样式表>浏览器缺省设置
HTML
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssTest</title>
<link rel="stylesheet" type="text/css" href="../css/cssTest.css">
</head>
<body>
<div>浏览器缺省样式</div>
<div class="outStyle">外部样式</div>
</body>
</html>
```
CSS
```
.outStyle{
font-size: 20px;
}
```
页面效果（浏览器默认字体大小为14px,外部样式将字体调整为20px）
![enter description here][1]
----
#### 内部样式表>外部样式表
HTML
```
<head>
<meta charset="UTF-8">
<title>cssTest</title>
<style type="text/css">
{font-size: 10px;}
</style>
<link rel="stylesheet" type="text/css" href="../css/cssTest.css">
</head>
<body>
<div>内部样式</div>
<div class="outStyle">外部样式</div>
</body>
```
CSS
```
.outStyle{
font-size: 20px;
}
```
页面效果（外部全局样式失效，内部全局样式决定字体大小）
enter description here
---
#### 内联样式>内部样式表
HTML
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssTest</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/cssTest.css"> -->
<style type="text/css">
*{
font-size: 10px;
}
</style>
</head>
<body>
<div>内部样式</div>
<div style="font-size: 20px;">内联样式</div>
</body>
</html>
```
页面效果（内部样式失效，内联样式决定字体大小）
![enter description here][1]
[1]: ./images/%E5%86%85%E8%81%94%E5%A4%A7%E4%BA%8E%E5%86%85%E9%83%A8_1.png "内联大于内部"