优先级：由高到低依次是: 内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省设置
优先级：由高到低依次是1,2,3,4
1.内联样式（在 HTML 元素内部）
<html>
<body>
<div>
<p style="color: red;">内联样式（在 HTML 元素内部）</p>
</div>
</body>
</html>
2.内部样式表（位于head 标签内部）
<html>
<head>
<style>
#idp {
color: red;
}
</style>
</head>
<body>
<div>
<p id="idp">内联样式（在 HTML 元素内部）</p>
</div>
</body>
</html>
3.外部样式表 （引入css文件）
<html>
<head>
<link rel="stylesheet" type="text/css" href="test1.css" />
</head>
<body>
<div>
<p id="idp">外部样式表</p>
</div>
</body>
</html>
// test1.css
#idp {
color: red;
}
说明：
引入"/src/test1.css" 会将test1.css文件插入到body内, body内css优先级低于head中的css
4.浏览器缺省设置
当1,2,3中都没有声明css样式时，浏览器会添加一些默认的css；例如浏览器默认显示字体的大小，颜色等
来源：CSDN
作者：预立科技
链接：https://blog.csdn.net/sinat_16998945/article/details/104037342