有关element.ui样式调整问题

在小伙伴们利用element.ui加上vue去做一个页面的时候会发现一个问题。

有时自己想要的效果不是element自己带的样式，此时就需要去自己调整element的样式，可是element的优先级被设置的非常高，当想修改样式的时候却往往触发不了，这里记几个我查询网上并运用却失败的情况

一、在标签里面直接加style样式

在element里，我们使用的标签都是饿了么自己定义好的让我们使用的，所以我们看到的知识一个标签，但是在他们写的css与js里像这个标签加了多个css，所以有时我们想改的并不是这个标签，而是标签里面的内容，就像穿梭框里面的文字大小，穿梭框的高度与宽度，这样往往起不到修改的效果

二、/deep/

有时我们找到了控制我们想要的位置的css样式，兴冲冲的粘到vue低端的style里面，但是却发现还是没有还是没有改变成我们想要的样式，此时经过查询网上提出加/deep/来进行样式穿透，经过修改后还是不能顶掉element的css样式

三、style不写scoped

在vue的style区域里面不写scoped，并在里面写自己要的css样式，经过修改证明这种方法可以覆盖掉element的css样式。但是这种方法会使全局的css样式都发生改变，当你在其他页面引用这一css时他会是你修改后的样式

四、！important

在自己要修改的css后面加！important来强调优先级，在测试过发现他还是顶不掉element的css样式

 

在经过长时间的测试与查询后终于让我找到了既能覆盖掉element的css的样式，又不会改变全局css的方法

这种方法是：你可以在你要修改的标签外面嵌套一个di