css在书写的过程中难免的会出现对同一个元素的属性层叠，所以css也叫层叠样式表，由此带来的优先级问题值得我们了解。
接下来看一段代码，里面主要包含了类选择器，通配选择器，id选择器，标签选择器以及行内样式，我用它们分别设置了p标签字体的颜色，接下来通过删除来观察它们的优先级
行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p2{
color: green;
}
*{
color: blue;
}
.p1{
color: yellow;
}
p{
color: black;
}
</style>
</head>
<body>
<p class="p1" id="p2" style="color: red;">css选择器优先级</p>
</body>
</html>
现在字体颜色为红色，如下图。看来行内样式是其中的最高优先级。
id选择器
现在我们把行内样式删除，现在颜色变成了绿色，id选择器起作用了，现在是：行内样式>id选择器
类选择器
现在删除id选择器，我们的类选择器生效了，字体变成了黄色，现在是：行内样式>id选择器>类选择器
标签选择器
删除了类选择器，我们的标签选择器生效，字体为黑，行内样式>id选择器>类选择器>标签选择器
通配选择器
最后只剩下了通配选择器，字体为蓝色
得出结论：行内样式>id选择器>类选择器>标签选择器>通配选择器
但是呢仅仅掌握这些还不够，现实中往往有更复杂的情况。
复杂情况–权重值
| 选择器 | 权重值 |
|---|---|
| 通用选择器 | 0 |
| 标签选择器 | 1 |
| 类选择器 | 10 |
| id选择器 | 100 |
| 行内样式 | 1000 |
当我们遇见了一个复合的选择器，例如 #p .a1 ul,它由类选择器，id选择器和标签选择器构成，它的权重就是三者权重之和，100+10+1=111
对于初学者计算这些权重可能比较麻烦，只要记住，选择范围越小越精确的复合选择器，他的优先级通常越高。