我们在实际开发团队中，这样类似的问题经常会上演。比如：
我之前写的样式呢，谁把我的样式覆盖了，无语。。。
使用第三方组件库之后，样式不能修改。。。
移动端组件，样式穿透不过去，样式不能生效。。。
谁TM的写的样式都用important，这我咋改样式，牵一发动全身。。。
哈哈哈 在实际工作中，有时候看到别人的代码，就会在心里吐槽，写的跟屎一样，无语。。。
实际上自己的代码，在别人的眼中也是跟屎一样的。哈哈哈哈。。。
好了言归正传，我们今天要太讨论的问题是：样式覆盖的问题。
在定义修改样式的时候，我们经常需要修改样式去满足UI不同的样式，在绝大部分情况下，当我们使用后面的样式覆盖前面的样式不生效的时候，就会简单粗暴的使用important来提高它的绝对地位，不允许修改。但是在css定义中，建议我们要少用慎用important来覆盖样式，一般是推荐提高样式的优先级来覆盖样式。
css优先级的6大分类
第一优先级：无条件使用important，它会覆盖页面内任何位置定义的元素样式
第二优先级：在html中添加style,即内联样式。该方法会造成css管理混乱，难以维护。
弟三优先级：id选择器 #id{}
第四优先级：class选择器 .test{}
第五优先级：元素选择器 div{}
弟六选择器: 通配符选择器 *
优先级的顺序
important > 内联style > id选择器 > class选择器 > 元素选择器 > 通配符选择器
优先级的数值定义
内联样式，权值1000
id选择器，权值100
class选择器，权值10
标签选择器，权值1
通配符选择器，权重0
注意：
像子选择器>、相邻兄弟元素选择器~、交集.、并集,、后代选择器空格都不在以上定义范围类，所以他们的优先级是0
所以往往我们在覆盖样式时候，除了加id class等样式名以提高样式等级之外，在权重等级相同的时候，只能使用先后顺序来覆盖样式。
但在实际开发中，比如我们引用了第三方库的样式，此时如果要对样式进行修改，以上方法提高样式优先级都不太可行。我们也无法保证代码的执行顺序，一般简单粗暴的加important，但important有副作用，要慎用。
所以：
当浏览器计算 CSS 选择器优先级时，它们本质上是在计算你组合了多少 ID、类、元素或等效选择器。实际上可以多次重复同一个选择器，每次重复都会增加权重
CSS 选择器 Level 4 规范中也提到：
CSS 选择器允许多次出现相同的简单选择器，而且可以增加权重。
案例：
<div class="test2">测试<span class="test22">测试数据2</span>
</div>
.test1{color: red;
}
.test2{color: aqua;
}
.test22{color: bisque;
}
.test22.test22{color: yellow;
}
实际显示的是黄色
即使代码位置在后面，但依然是前面的样式生效了，很简单多加一个样式名，其权重提高了1，故优于下面的权重
