我们在做前端开发过程中一定都会遇到过这个问题，已经给元素添加或修改样式了可是在运行过程中却没有效果，打开浏览器调试界面发现给元素添加或修改样式并没有生效，那么这很大原因是因为样式的优先级引起的。
CSS样式的优先级
1、 优先级规则
层叠样式的优先级为：
浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式
内联样式在层叠样式中为最高级
在开发过程中会产生标签的层层嵌套，在标签嵌套的过程中，样式的优先级是这样的：
祖先级样式<最近的层级样式<直接样式
有些样式会被继承下去，因此在开发中我们可以在最外层级定义通用样式，下面的所有子级会继承。
在开发过程中尽可能使用类选择器来编写我们的样式，类选择器可以给多个标签进行复用，可重复写很多相同的样式，尽量不要使用ID选择器与类选择器混用，这样会因为优先级问题造成某些样式会被覆盖。
2、!important的使用
!important是CSS1就已经定义的语法，他作用是提高指定样式有用最高优先级权重，不受其他样式的影响，写法如下：
写在需要设置最高优先级样式的后面即可。
如：<div style=”color:#999999; font-size: 20px” class=”c1”>字体<div>
<style>
.c1 {
color: #276FF5 !important ;
font-size: 10px ;
}
</style>
这里div元素使用了内联样式和类选择器，按优先及内联样式的优先级最高，但是.c1中的color样式设置的!important属性，所以“字体”的color属性取的是.c1中设置的#276FF5，而.c1中的font-size属性没有设置!important，因此按优先级的高低“字体”的font-size属性取内联样式中设置的值20px。
CSS样式覆盖
我们在前端开发过程中经常会遇到样式被覆盖的问题，这是由于写样式的时候我们在运用了不同的方式来写导致有些优先级较低方式会被覆盖掉，为了避免这些问题的发生尽可能统一用一种方式来编写样式减少样式的被覆盖率。
1、 scoped的使用
scoped是<style>标签的一个属性，当 <style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，而不会穿透到子元素中。当父及组件和子级组件包含有相同类名的组件时如果没有在<style>中加入scoped就很可能造成样式污染，某个样式就会被覆盖掉。因此在开发过程中涉及到父及组件和子级组件的应该加上scoped避免影响到其他组件。
2、 样式的修改与覆盖
在开发过程中为了提高开发速度我们往往会借助一下开元的UI框架（如ElenemtUI）,但光使用UI并不能达到产品设计想要的效果，因此我们则需要对UI某些元素的样式进行修改调整，以达到想要的效果。
例如使用了ElenemtUI在使用select选择器时，根据需要项目中某个select选择器与其他的有些区别因此需要进行样式的修改
原UI的select选择器多选的样式
根据需求需要达到一下效果
由于ElenemtUI样式是全局样式，改动源文件会造成一个全局的影响，源文件也并不好改，ElenemtUI的select选择器元素是封装在源码进行，有些元素我们无法使用内联样式进行修改，那么我们只能通过对应的类选择器来修改样式
如下修改ElenemtUI的select选择器中的input样式
取input定义的类选择器el-input__inner进行修改，在修改的样式中一定要加上!important，由于对el-input__inner选择器进行修改，与ElenemtUI中源文件的el-input__inner优先级处于同级，在执行过程中就会因为一个执行顺序问题若没有加上!important限定为最高优先级，我们修改的样式就很有可能会被覆盖掉。
这里我在需要修改的el-input__inner选择器前面加上了.el-s1限制，确保修改的样式只影响到el-s1类下级的el-input__inner类的元素样式，不会的对其他位置的el-input__inner类元素的样式造成影响。
在修改全局样式时建议在<style>加上scoped属性
<script scoped>
限制样式只在当前组件起作用，避免修改的全局样式造成样式污染，避免影响其他组件的样式效果。
以上是我在前端开发中遇到的优先级和样式覆盖的问题的分享，有不足的地方欢迎大家进行补充与探讨！
