vue项目引用 iView 组件——自定义组件样式不生效

开发过程中，项目引用了iView组件。但是有些样式不是我们想要的，这时候就需要自己写样式了。

下面是解析之后的：

我们可以看到scoped干了两件事：
①、给标签添加了一个唯一标识编码
②、给对应的样式也添加了这个编码属性

所以这种样式的覆盖主要就通过权重来修改覆盖。tips：

.button[data-v-2311c06a]{ padding: 5px 10px; font-size: 12px; border-radus: 2px;}

.content{ width: 1200px; margin: 0 auto;}

.content .button{ border-raduis: 5px;} //.content .button比.button[data-v-2311c06a]权重高

二、接下来就说说全局样式与局部样式的使用

①、在一个组件中同时使用有作用域和无作用域的样式

②、不用scoped限定css的作用域，而是通过给template的根部div添加一个唯一的名字，用父级限制样式

③、深度作用选择器 ：如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符

       这个就可以解决，我们调用别人封装好的组件的时候，不想去掉scoped属性，又想让我们自己写的样式生效这个问题。
iview改变tab标签页的默认样式，如下：

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。