vue项目中的scoped之前在开发vue前端项目时，在某个页面组件中想通过css改变第三方组件样式，但并不想全局修改，

问题描述

之前在开发vue前端项目时，在某个页面组件中想通过css改变第三方组件样式，但并不想全局修改，只改变该页面引用的组件样式，尝试在该页面利用自定义的className或是复写第三方组件类名去修改，发现然并软。。。。

后来通过某度查找多方资料，了解到有个深度选择器的东东：/deep/（>>>）。用法如下：

/deep/ .van-icon-arrow-down {
        font-size: 0.2rem;
    }

完美解决我的困扰，但是作为一名前端开发届的小学生，满满的求知欲，为什么之前复写或是自定义都不起作用，为什么加上这个就又可以，小问号，你是不是有很多个小朋友，接下来就让我们一起探索吧，gogogo

不懂就问不懂就查,原来是让人又爱又恨的scoped引起的

<style lang="scss" scoped>
    .van-field__label {
        width: 0rem !important;
    }
    ...
<style>

来看看scoped的具体作用到底是什么：


实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块
”

那么又是如何实现这一功能的呢？通过对添加scoped属性的组件和未添加的组件元素审查对比发现，添加有scoped属性的组件dom经过编译后增加了自定义属性data-v-[hash值]

并且在style标签内的类名选择器后也加上了对应属性值，以达到样式文件的模块化私有化；

根据vue-loader官网文档介绍：


使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式.
”

然后又提供深度选择器能够影响深层次的组件，不过有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。好的，如上内容如有纰漏，望指正！