vue样式穿透
style 节点的 scoped 属性是为了防止组件之间的样式冲突,实现样式模块私有化,避免全局样式污染
对于 style上加了 scope 属性的组件，会主动加上 data-v-xx 的属性来唯一标识当前组件
如果给当前组件的 style 节点添加了 scoped 属性,则当前的样式对其子组件是不生效的,
如果想让某些样式对子组件生效, sass 和 less 的样式穿透,可以使用 /deep/ 深度选择器
<style lang="less" scoped>
.title ::v-deep.title1{
color: white;
}
</style>
或者使用两个 style 标签
<style>
/* 用于修改第三方库的样式 */
</style>
<style scoped>
/* 自己的组件内样式 */
</style>
scoped
子组件的根元素
使用 scoped 后，父组件的样式将不会渗透到子组件中。
不过一个子组件的根节点会同时受其父组件的 scoped CSS
和子组件的 scoped CSS 的影响。这样设计是为了让父组件可
以从布局的角度出发，调整其子组件根元素的样式。
但是这次项目里面出现了父组件的样式影响了子组件的样式。
父组件
<style scoped>
.test{color: pink;}
</style>
子组件
<template>
<div class="test"> 测试父组件样式影响子组件 </div>
</template>
此时，子组件里面的文字颜色也变为红色了；
首先注意是根元素，如果子组件中是这样的结构,并不能影响test,因为并没有明确的根元素（个人观点）
<template>
<div class="test">
测试1
</div>
<div>
测试2
</div>
</template>