最简单的方法
- 如果这个!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>