如何覆盖!important修饰的属性

最简单的方法

• 如果这个!important修饰的属性 是自己的写的，去掉这种写法，使用优先级的方式来写这个属性（.outter .inner 的优先级就会比 。outter的优先级高）

复杂的方法：用魔法打败魔法

但是这个样式来自于全局css，无法修改怎么办

使用行内样式

• 行内样式的优先级一般比引入的css的优先级高

<el-input style= 'width:100px !important;'/>

• 有時候会生效，因为很多时候全局的css修饰里面的元素的内容，el-input只是最外层的壳子而已
• 这个时候你怎么在行内样式中写样式，在内层元素中都无法体现
  

使用deep和优先级的双重魔法

在元素上再加一个类名

 <el-inputclass="rangeInput"/>

• 类名的层级更深
• 使用::v-deep语法进行深层覆盖

<style scoped lang="scss">
::v-deep .rangeInput .el-input__inner{width: 70px !important;height: 30px !important;
}
</style>