大家在使用element-ui的时候,有可能会去修改element-ui的样式,但是在修改样式的过程中会出现各种问题,今天就来说一说我遇到的问题吧!
比如这个多选级联的选择框,ui要求是所有的输入框都必须是34px的高度,但是这个输入框的高度是36px,有的是40px高度,没有行内样式的还好改,有了行内样式的怎么改呢?
由于我们只能用比内联样式高的权重,这时候如果我们直接强行修改样式用 !important的话,这个输入框的行内高度是动态变化的,内容变多就会撑不起来就像这样
我们想要的效果是这样,而且还得让初始的高度为34px,所以就得覆盖他之前的行内样式。
终于在我苦思冥想后终于想到了一个办法
那就是css3的属性选择器
总结如下:
1、E[attr]只使用属性名,但没有确定任何属性值;
**有attr就选中**
2、E[attr="value"]指定属性名,并指定了该属性的属性值;空格都不行;
**只有值等于value才选中**
3、E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且**以空格隔开**,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写
**只要value是词列表就选中**
4、E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的;从第一个字母
**开头值等于value选中**
5、E[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的,最后一个字母
**结尾至等于value就选中**
6、E[attr*="value"]指定了属性名,并且有属性值,而且属值中包含了value;
**只要包含一个value就选中**
7、E[attr|="value"]指定了属性名,并且属性值是**value**或者以**“value-”**开头的值(比如说zh-cn);有关于这些属性选择器除了IE6不支持外,其他都是可以的
既然我们想让他刚开始就变为34px,然后在多选后再让它的行内样式生效,我们就可用这个属性选择器
.el-input.el-input--medium.el-input--suffix .el-input__inner[style="height: 36px;"] {
height: 34px !important;
}
我们让他行内高度等于36px的时候不起效
让他行内高度变的时候这个属性选择器不起效
完美!