CSS选择器优先级

当两个样式规则作用到同一个元素上时，这时候该用谁的样式，在CSS有一套关于优先级的定义

单类型情况

不同级别
大致可以分为以下几种级别：

1. 在属性后面使用!important，会覆盖页面中任何位置定义的样式属性
2. 作为style写在元素内的样式
3. id选择器
4. class类选择器
5. 标签选择器
6. 通配符选择器
7. 浏览器自定义或者继承的样式
   总结：
   优先级顺序由大到下分别为：!important>行内样式>id选择器>class类选择器>标签选择器>通配符选择器>浏览器自定义或者继承的样式
   **相同级别：**相同级别按照从上到下的执行顺序上面的会覆盖下面的

多类型嵌套

多类型的选择器嵌套的时候，上面的就已经解决不了我们的问题例如div.text, p这种多类型的选择器，这种时候我们需要了解一下选择器的权重了，在CSS中每种类型的选择器都有自己的权重值，他们的值分别如下：

选择器类型	权重值
!important	infinity(无穷大)
行内样式	1000
id选择器	100
class选择器 / 属性选择器 / 伪类选择器	10
标签选择器 / 伪元素选择器	1
通配符	0

**注意：**这里的数字代表的是一种思想，它不是10进制，是256进制，用我们平常的10进制数字来说，0到255之后加1才是这个里面的1。

当我们遇到多类型的时候将它们的权重值相加，得到结果大的优先级就高，如果相同那么后面覆盖前面的。

<style type="text/css">
div.test {
	background-color: red;
	width: 100px;
	height: 100px;
}
.test.test2 {
	background-color: green;
	width: 100px;
	height: 100px;
}
</style>
<div class = "test test2"></div>

在上面的例子中，div.test它的权重值为1+10结果为11，而.test.test2 的权重值为10+10结果为20，所以.test.test2的优先级要高一些，所以颜色为green。这样就可以解决多类型选择器优先级问题了。