当使用选择器为元素设置样式时，如果样式发生了冲突，采用哪个样式由选择器的优先级来决定。
优先级的权重值越大，优先级越高，优先级规则：
- 内联样式 ， 优先级 1000
- id选择器，优先级 100
- 类和伪类， 优先级 10
- 元素选择器，优先级 1
- 通配* ， 优先级 0
- 继承的样式，没有优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*优先级第四:1*/
p{
background-color: red;
}
/*优先级第二:100*/
#p1{
background-color: blue;
}
/*优先级第三:10*/
.p2{
background-color: green;
}
/*优先级第一 ： 100 + 1*/
p#p1{
background-color: yellow;
}
</style>
</head>
<body>
<!--
描述：style="background-color: brown;"内联样式的优先级为1000
-->
<div>
<p id="p1" class="p2" style="background-color: brown;">丁香一样的颜色</p>
</div>
</body> </body>
</html>浏览器显示为：
