用过vue组件的前端同学应该都遇到过一个问题，就是在当前页的组件有自界说样式，而用了scoped编译出的样式对组件内部并不起感化，最后要写全局样式才华有效，qq空间访问权限破解吧 ，但是可能会污染到其他组件，其实我们可以用/deep/来解决此问题。

关于scoped请检察：https://www.cnblogs.com/vickylinj/p/9573395.html

1.混合本地和全局样式

您可以在同一组件中包罗全局和非全局样式，此要领可能造成污染：

<style> /* global styles */ </style>

<style scoped> /* local styles */ </style>

  2.深度选择器——>>>(/deep) 2.1子组件根元素

使用时scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点将受父级感化域CSS和子级感化域CSS的影响。这是设计的，以便父级可以设置子根元素的样式以进行构造。

2.2>>>(/deep)

如果您但愿scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合子：

<style scoped> .a /deep/ .b{ /* 第一种写法 */ } .a >>> .b { /* 第二种写法 */ } </style> // less 写法 <style lang=‘less‘ scoped> .a { /deep/ .b{ /* less 写法 */ } } </style>

以大将编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

某些预措置惩罚惩罚器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用/deep/组合器 - 它是别号>>>并且事情完全不异。

2.3动态生成的内容

创建的DOM内容v-html不受范畴样式的影响，但您仍然可以使用深度选择器设置它们的样式。

2.4注意

范畴样式不会消除类的需要。由于浏览器泛起各类CSS选择器的方法，p { color: red }在感化域时（即与属性选择器结合时）会慢很多倍。如果您使用类或ID，例如in .example { color: red }，那么您几乎可以消除性能损掉。这是一个游乐场，您可以本身测试差异。

在递归组件中注意儿女选择器！对付带有选择器的CSS法则.a .b，如果匹配的元素.a包罗递归子组件，则.b该子组件中的所有组件都将与法则匹配。