element-ui 修改级多选联选择器或多选下拉输入框的高度，并不影响多选后内容撑起高度。

大家在使用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的时候不起效
让他行内高度变的时候这个属性选择器不起效

完美！