引入插件时，有时往下找层级时设置相应class样式不生效

项目经常需要引入第三方类库或者插件之类，比如antd，vant，element等等，但是一般来说插件都是封装好的组件，样式也几乎是固定的。但在使用过程中，需求方的样式可能和引用的已有样式有差别，需要细微调整下，一般就会找到下层class，然后设置相应的样式，但是，很多情况下你设置好了，它就是不生效。
遇到这种情况的时候，不妨打开控制台ctrl + shift + c 查找元素，找到对应的引入组件，不出意外的话，你会看到：

这里有一串data-v-xxxxxxxx，而这个div的对应类则会带有[data-v-xxxxxxxx]，这时候你在样式中写

.open {
	background: black;
	color: red!important;
}

这样无论你写啥都是没用的，加权重也没用。
这时候，你应该用stylus的样式穿透：

/deep/.open {//如果你用的是less或者sass语法，就用/deep/
	background: black;
	color: red;
}
//或者
>>>.open {//如果你用的是其他语法，就用/deep/
	background: black;
	color: red;
}

解决办法有了，就探讨下为什么会这样吧。其实就是因为这个scoped，我们写样式的时候为了保证每个页面、组件互不影响，会用scoped属性来达到样式私有化的效果，从而不造成全局污染，而加了scoped属性的组件就会编译出data-v-xxxxxxxx作为唯一标识，所以才会造成以上问题。