今天爱分享给大家带来vue scoped css 深度选择器 父组件的样式将渗透到子组件中，希望能够帮助到大家。
当 style 标记具有该scoped属性时，其CSS将仅应用于当前组件的元素。代码如下：
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
编译之后
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
可以看出来，组件之间的样式是相互独立的，即父组件不能使用子组件的样式，子组件也不能使用父组件的样式。如果，不加scoped， 所有的组件都可以使用,称之为全局样式，加了scoped只有本组件可以使用，称为本地样式.
混合样式
您可以在同一组件中包含范围和非范围样式：
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
子组件根元素
使用时scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点将受父级作用域CSS和子级作用域CSS的影响。这是设计的，以便父级可以设置子根元素的样式以进行布局。
深度选择器
如果您希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合子：
<style scoped>
.a >>> .b { /* ... */ }
</style>
以上将编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }
某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 – 两者都是别名，>>>并且工作完全相同。
<style lang="less" scoped>
.text-box {
/deep/ input {
width: 166px;
text-align: center;
}
}
</style>
官方文档：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors