css样式的作用域，何为scoped？
scoped 属性是 HTML5 中的新属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。在Vue.js的组件化开发中，常常会对某个组件的style标签加上scoped属性，如<style lang='less' scoped>，当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，这样就可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了组件的私有化，样式的模块化。
scoped的实现原理
vue中的scoped属性的效果主要通过PostCSS转译实现，通过观察渲染的DOM结构可以发现，在DOM结构以及css样式上加了唯一的标记，使样式唯一且只作用于含有该属性的dom——组件内部dom，代码如下：
<template>
<div class="box">divBox</div>
</template>
<style scoped>
.box {
width: 100px;
height:100px;
background:blue;
}
</style>转译后：
<template>
<div class="box" data-v-fabc90cc>divBox</div></template>
<style>
.box[data-v-fabc90cc] {
width: 100px;
height:100px;
background:blue;
}
</style>需要注意的是：如果组件内部还有组件，那只会给最外层组件加唯一属性字段，不影响组件北部的样式
造成的问题：父组件无法直接修改子组件的样式，如下图：
解决办法：
1、css样式穿透
stylus的样式穿透 使用 >>> 格式如下：
外层 >>> 第三方组件 {样式}
sass和less的样式穿透 使用 /deep/ 格式如下：
/deep/ 第三方组件 {样式}
2、再写一套不加scoped的样式 单独控制
-------------------------------------------------------------------------------------------------
如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏
及时获取更多姿势，请您关注！！！
